如何让Bootstrap文档上传页的所有上传按钮对齐到同一列

你当前使用的是Bootstrap 4框架，直接用原生栅格系统拆分每行的宽度占比即可实现所有Upload按钮对齐到同一列，无需额外编写自定义CSS：

• 将每个上传项的区域拆分为固定比例的两列，左侧标签区域和右侧按钮区域使用统一的栅格占比，所有按钮自然会对齐到同一列
• 后续新增的上传项只要遵循相同的栅格拆分规则，也会自动对齐，不会出现布局错乱

你之前将按钮放入单独div会换行的原因是没有给标签和按钮分配固定的宽度占比，块级元素默认占满整行宽度，所以按钮会掉到下一行，用栅格拆分宽度后就可以解决这个问题。

修改后的完整代码 #

<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">
      <div class="row align-items-center">
        <!-- 左侧标签区域 统一占9列宽度 -->
        <div class="col-9">
          <label><b><span style="color:#e60000;">*</span> Copy of Latest Certificate ARDSFGH</b></label>
        </div>
        <!-- 右侧按钮区域 统一占3列宽度 按钮右对齐 -->
        <div class="col-3 d-flex justify-content-end">
          <button type="button" class="btn btn-info choose_attachment">Upload</button>
          <input type="file" id="attachment1" hidden>
        </div>
      </div>
      <!-- 附件预览区域单独占满整行 -->
      <div class="tab-content col-12 mt-2" id="myTabContent-1">
        <div class="tab-pane fade show active" role="tabpanel">
          <div id="choose1" class="row p-1"></div>    
        </div>
      </div>
    </div>
  </div> 
  <div class="row">
    <div class="col-lg-10 mb-30">
      <div class="row align-items-center">
        <!-- 左侧标签区域 统一占9列宽度 -->
        <div class="col-9">
          <label><b><span style="color:#e60000;">*</span> Copy of Individual Identification Card/Passport</b></label>
        </div>
        <!-- 右侧按钮区域 统一占3列宽度 按钮右对齐 -->
        <div class="col-3 d-flex justify-content-end">
          <button type="button" class="btn btn-info choose_attachment2">Upload</button>
          <input type="file" id="attachment2" hidden>
        </div>
      </div>
      <!-- 附件预览区域单独占满整行 -->
      <div class="tab-content col-12 mt-2" id="myTabContent-2">
        <div class="tab-pane fade show active" role="tabpanel">
          <div id="choose2" class="row p-1"></div>    
        </div>
      </div>
    </div>
  </div>
</div>

如果需要适配更小的屏幕也保持左右布局，直接保留col-9和col-3的设置即可；如果希望小屏幕下按钮自动堆叠到标签下方，改成col-md-9和col-md-3即可。

内容的提问来源于stack exchange，提问作者nonutt