Bootstrap使用div实现元素对齐失效的解决方法

你现在遇到的对齐错位问题，核心原因是多层flex嵌套时没有给子元素设置固定宽度规则，仅靠justify-content-around分配空间会被不同长度的标签文字撑开，导致上下行的输入框位置、宽度不统一。不需要使用table布局，用Bootstrap原生的工具类就能实现规整的表单布局。

原代码实际运行效果：

修正后代码 #

<div class="container-fluid px-0">
  <!-- 第一行表单项 -->
  <div class="row mb-3 g-3">
    <div class="col-6 d-flex align-items-center gap-2">
      <label class="text-nowrap mb-0">Código da filial:</label>
      <input type="text" class="form-control" name="CTD_ITEM">
    </div>
    <div class="col-6 d-flex align-items-center gap-2">
      <label class="text-nowrap mb-0">Nome:</label>
      <input type="text" class="form-control" name="CTD_DESC01">
    </div>
  </div>
  <!-- 第二行表单项 -->
  <div class="row g-3">
    <div class="col-6 d-flex align-items-center gap-2">
      <label class="text-nowrap mb-0">Estado:</label>
      <input type="text" class="form-control" name="CTD_DESC04">
    </div>
    <div class="col-6 d-flex align-items-center gap-2">
      <label class="text-nowrap mb-0">Sigla:</label>
      <input type="text" class="form-control" name="CTD_DESC02">
    </div>
  </div>
</div>

关键调整点 #

• 用Bootstrap原生栅格的row+col-6实现等宽两列布局，每列固定占50%容器宽度，从根源上避免上下行表单项错位
• 每个表单项容器添加d-flex align-items-center gap-2，让标签文字和输入框垂直居中对齐，同时保留固定间距，不会出现文字和输入框贴边的问题
• 标签添加text-nowrap强制文字不换行，添加mb-0去掉label标签默认的下边距；form-control类会自动占满列内剩余宽度，保证所有输入框尺寸完全统一
• 用mb-3设置上下两行的间距，g-3设置同一行两个表单项的间距，布局疏密一致

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