Bootstrap表单中两个垂直输入框共用按钮如何正确对齐不影响原有布局

问题场景 #

我有一个包含多个表单字段的表单，仅需要为其中2个输入框设置共用按钮，且不影响剩余部分的布局，但目前按钮无法正常对齐。

原有代码存在的问题是按钮和输入框的层级结构不匹配，导致对齐逻辑错乱，且后续输入框和前半部分按钮共用列结构，会互相干扰布局。

修复思路 #

直接使用Bootstrap原生栅格嵌套+垂直对齐属性实现需求，不需要额外编写复杂自定义CSS：

• 将前两个需要共用按钮的输入框放在同一列容器内
• 按钮单独放在自适应宽度的列中，通过垂直居中属性让按钮和前两个输入框的整体高度对齐
• 剩余表单字段单独占满整行，完全不受前半部分布局影响

修正后代码 #

<div class="container">
  <!-- 前两个输入框+共用按钮的行，添加垂直居中对齐属性 -->
  <div class="row align-items-center">
    <div class="col">
      <div class="form-group pt-4">   
        <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
      </div>
      <div class="form-group">   
        <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
      </div>
    </div>
    <!-- 按钮列用col-auto自适应宽度，不占用多余空间 -->
    <div class="col-auto">
      <button type="submit" class="btn btn-secondary">
        <i class="fas fa-ellipsis-v"></i>
      </button> 
    </div>
  </div>
  <!-- 后续表单字段单独放在新行，布局完全独立 -->
  <div class="row">
    <div class="col-12">
      <div class="form-group">   
        <input type="text" class="form-control" id="inputAddress3" placeholder="Apartment, studio, or floor">
      </div>
    </div>
  </div>
</div>

关键改动说明 #

• 给外层包裹输入框和按钮的row添加align-items-center类，自动实现按钮和前两个输入框整体垂直对齐，不需要手动加mt-4这类固定边距适配，不同分辨率下的适配性更强
• 按钮列使用col-auto替代原来的col，仅占用按钮本身需要的宽度，不会挤压输入框的可用空间
• 第三个及后续的表单字段单独放在新的row中，布局完全独立，不会受前面的按钮结构影响

内容的提问来源于stack exchange，提问作者G.L.P