Bootstrap CSS布局问题：如何使label与input标签横向对齐？

这个问题我熟！你遇到的是Bootstrap表单布局里很常见的对齐问题，主要是两个小细节没处理对，我给你拆解下：

问题根源 #

1. 未使用Bootstrap栅格列分配空间：你用了form-group row，但没给label和输入框容器添加col-*类，元素默认以块级形式排列，自然会换行。
2. Checkbox误用了form-control类：form-control是为文本输入框、下拉框这类元素设计的，会让元素占满父容器宽度并变成块级；而checkbox有专门的form-check-input类，用来保持行内特性。

正确的实现方案 #

下面给你两种常用的横向对齐写法，根据你的布局需求选择即可：

方案1：行内紧凑对齐（适合不需要固定宽度的场景）

用form-check-inline让label和checkbox在同一行紧凑排列：

<div class="form-group row">
  <div class="col-auto">
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
      <label class="form-check-label" for="field_hasSernum">Has Sernum</label>
    </div>
  </div>
</div>

方案2：栅格化对齐（适合需要固定label宽度的表单场景）

通过col-*类分配label和输入框区域的宽度，保持整体表单的一致性：

<div class="form-group row">
  <!-- 给label分配固定宽度的列 -->
  <label for="field_hasSernum" class="col-sm-2 col-form-label">Has Sernum</label>
  <div class="col-sm-10">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="hasSernum" id="field_hasSernum">
    </div>
  </div>
</div>

关键要点 #

• 始终用form-check-input代替form-control来渲染checkbox/radio按钮
• 配合form-check-label关联标签，确保点击label也能触发复选框
• 用row+col-*或者form-check-inline来控制行内排列

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