如何在Bootstrap表单中使Checkbox与其他输入控件对齐？

要让Checkbox和其他输入控件（如文本框、下拉框）垂直对齐，只需调整Checkbox所在列的结构，使其与其他输入列保持一致即可：

修改后的代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<form class="row g-3">
  <div class="col-md-6">
    <label for="inputEmail4" class="form-label">Email</label>
    <input type="email" class="form-control" id="inputEmail4">
  </div>
  <div class="col-md-6">
    <label for="inputPassword4" class="form-label">Password</label>
    <input type="password" class="form-control" id="inputPassword4">
  </div>
  <div class="col-6">
    <label for="inputAddress" class="form-label">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="col-12">
    <label for="inputAddress2" class="form-label">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="col-md-6">
    <label for="inputCity" class="form-label">City</label>
    <input type="text" class="form-control" id="inputCity">
  </div>
  <div class="col-md-4">
    <label for="inputState" class="form-label">State</label>
    <select id="inputState" class="form-select">
      <option selected>Choose...</option>
      <option>...</option>
    </select>
  </div>

  <div class="col-2">
    <!-- 添加空的form-label，保持与其他列结构一致 -->
    <label class="form-label">&nbsp;</label>
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
            Check me out
          </label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-primary">Sign in</button>
  </div>
</form>

原理说明 #

其他输入控件所在的列都遵循「form-label + 输入控件」的结构，Checkbox所在列原本缺少对应的标签容器，导致其垂直位置与其他控件的标签对齐。添加空的form-label后，列内结构与其他列统一，Checkbox会自动定位到与其他输入控件平齐的位置。

如果不想显示空标签，也可以使用Bootstrap的视觉隐藏类sr-only来隐藏标签：

<label class="form-label sr-only">Checkbox</label>

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