调整上传按钮是否与其他上传按钮位于同一列?

Question

我有一整页的列表来上传文档。但是我的上传文档页面看起来有点乱，上传按钮也没有组织。

我想实现一个页面，所有的upload按钮坐在同一列。我试图把按钮放在另一个<div>，但按钮被推到下一行。

如何实现这样的输出?

Copy of Latest Certificate ARDSFGH                  Upload
Copy of Individual Identification Card/Passport     Upload

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
<div class="row">
<div class="col-lg-10 mb-30">
<label><b><span style="color:#e60000;">*</span> Copy of Latest Certificate ARDSFGH</b></label>
<button type="button" class="btn btn-info w-30 choose_attachment">Upload</button>
<input type="file" id="attachment1" hidden>
<div class="tab-content col-12" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div id="choose1" class="row p-1"></div>    
</div>
</div>
</div>
</div> 
<div class="row">
<div class="col-lg-10 mb-30">
<label><b><span style="color:#e60000;">*</span> Copy of Individual Identification Card/Passport</b></label>
<button type="button" class="btn btn-info w-30 choose_attachment2">Upload</button>
<input type="file" id="attachment2" hidden>
<div class="tab-content col-12" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div id="choose2" class="row p-1"></div>    
</div>
</div>
</div>
</div>

Answer 1

你可以添加另一个颜色来设置上传按钮在相同的位置

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="card-body">
<div class="row">
<div class="col-sm-8 mb-30">
<label><b><span style="color:#e60000;">*</span> Copy of Latest Certificate ARDSFGH</b></label>

</div>
<div class="col-sm-3 text-left">
<button type="button" class="btn btn-info w-30 choose_attachment">Upload</button>
<input type="file" id="attachment1" hidden>
<div class="tab-content col-12" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div id="choose1" class="row p-1"></div>    
</div>
</div>
</div>
</div> 
<div class="row">
<div class="col-sm-8 mb-30">
<label><b><span style="color:#e60000;">*</span> Copy of Individual Identification Card/Passport</b></label>

</div>
<div class="col-sm-3 text-left">
<button type="button" class="btn btn-info w-30 choose_attachment2">Upload</button>
<input type="file" id="attachment2" hidden>
<div class="tab-content col-12" id="myTabContent-2">
<div class="tab-pane fade show active" id="addCustodian" role="tabpanel" aria-labelledby="addCustodian-tab">
<div id="choose2" class="row p-1"></div>    
</div>
</div>
</div>
</div>