如何让嵌套容器后的Bootstrap 4 FORM2布局与FORM1完全一致？

问题根源其实很简单：你把每组的<label>和输入容器分别放进div.myFormColumnLeft和div.myFormColumnRight后，这两个div默认是块级元素，会自动换行，导致标签和输入不在同一行。只需要借助Bootstrap的flex布局类，微调一下嵌套结构就能解决。

核心修改思路 #

给每组的myFormColumnLeft和myFormColumnRight套一个flex容器，强制它们在同一行排列，同时加上垂直对齐类，保证视觉效果和FORM1完全一致。

代码示例对比 #

原FORM1的典型参考结构

<form class="FORM1">
  <div class="form-row align-items-center">
    <!-- 第一组 -->
    <div class="col-auto">
      <label for="input1" class="col-form-label">标签1</label>
      <input type="text" class="form-control" id="input1">
    </div>
    <!-- 第二组 -->
    <div class="col-auto">
      <label for="input2" class="col-form-label">标签2</label>
      <input type="text" class="form-control" id="input2">
    </div>
  </div>
</form>

修改后的FORM2结构（和FORM1布局完全一致）

<form class="FORM2">
  <div class="form-row align-items-center">
    <!-- 第一组 -->
    <div class="col-auto d-flex align-items-center">
      <div class="myFormColumnLeft mr-2">
        <label for="input1" class="col-form-label">标签1</label>
      </div>
      <div class="myFormColumnRight">
        <input type="text" class="form-control" id="input1">
      </div>
    </div>
    <!-- 第二组 -->
    <div class="col-auto d-flex align-items-center">
      <div class="myFormColumnLeft mr-2">
        <label for="input2" class="col-form-label">标签2</label>
      </div>
      <div class="myFormColumnRight">
        <input type="text" class="form-control" id="input2">
      </div>
    </div>
  </div>
</form>

关键修改点说明 #

• d-flex：把每组的外层容器变成flex布局，让myFormColumnLeft和myFormColumnRight在同一行排列。
• align-items-center：保证标签和输入元素垂直居中，和FORM1的视觉对齐效果完全匹配。
• col-form-label：给label加上Bootstrap默认的表单标签样式，确保字体大小、间距和FORM1统一。
• mr-2：给标签和输入之间添加合适的间距，还原原生Bootstrap表单的留白体验。

如果你的myFormColumnLeft/myFormColumnRight有自定义CSS，注意不要设置display: block这类会破坏flex布局的样式，保持它们的默认inline特性即可。

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