如何使用Bootstrap 5实现不同行输入框的垂直对齐？

问题根源 #

你当前的布局问题在于：

• 不同行的label列占比不一致（第一行col-md-2，后续行col-md-5），导致输入框起始位置无统一基准
• 内部row使用justify-content-center让表单组居中，进一步打乱了整体对齐线

修改后的完整代码 #

<form>
  <!-- 第一行：单列表单组 -->
  <div class="row mb-3 align-items-center">
    <label for="Nationality" class="col-md-2 col-form-label required">Nationality</label>
    <div class="col-md-10">
      <input type="text" class="form-control" name="Nationality" id="Nationality">
    </div>
  </div>

  <!-- 第二行：双列表单组 -->
  <div class="row mb-3">
    <div class="col-md-6">
      <div class="row align-items-center">
        <label for="maritalStatus" class="col-md-4 col-form-label required">maritalStatus</label>
        <div class="col-md-8">
          <select class="form-control selecting" id="maritalStatus" name="maritalStatus">
            <option value=""></option>
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="row align-items-center">
        <label for="education" class="col-md-4 col-form-label required">Education</label>
        <div class="col-md-8">
          <select class="form-control selecting" id="education" name="education">
            <option value=""></option>
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- 第三行：三列表单组 -->
  <div class="row mb-3">
    <div class="col-md-4">
      <div class="row align-items-center">
        <label for="GHI" class="col-md-4 col-form-label required">GHI</label>
        <div class="col-md-8">
          <select class="form-control selecting" id="GHI" name="GHI">
            <option value=""></option>
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row align-items-center">
        <label for="DEF" class="col-md-4 col-form-label required">DEF</label>
        <div class="col-md-8">
          <select class="form-control selecting" id="DEF" name="DEF">
            <option value=""></option>
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="row align-items-center">
        <label for="ABC" class="col-md-4 col-form-label required">ABC</label>
        <div class="col-md-8">
          <select class="form-control selecting" id="ABC" name="ABC">
            <option value=""></option>
            <option value="a">a</option>
            <option value="b">b</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</form>

关键修改说明 #

1. 统一label宽度基准：

   • 第一行label用col-md-2（占整行1/6宽度）
   • 第二、三行的每个表单组在col-md-6/col-md-4容器内，label用col-md-4（占容器1/3宽度，对应整行的1/6，和第一行label宽度完全一致）
     这样所有label的水平宽度统一，输入框自然对齐到同一起始线

2. 移除干扰布局的类：

   • 删除所有justify-content-center，避免表单组居中偏移
   • 保留align-items-center确保label和输入框垂直居中对齐

3. 简化嵌套结构：

   • 去掉多余的外层col-md-12嵌套，直接用row包裹表单组，减少层级

样式优化补充 #

• 用mb-3统一所有行的底部间距，替代零散的mt-3，布局更规整
• 给每个内部row添加align-items-center，确保label和输入框垂直居中（适配不同高度的控件）
• 修正拼写错误：Educaiton改为Education

结论 #

完全可以仅通过Bootstrap内置类实现输入框对齐，不需要额外自定义CSS。核心是保证所有label在水平方向上的占比一致，避免嵌套布局中的居中类破坏整体对齐基准。

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