<p>Bootstrap 5 中 form-label 和 form-control 默认垂直堆叠，因二者均为块级元素；需用 row + col-* 布局实现水平对齐，并添加 align-items-center 解决基线错位问题。</p>
Bootstrap 5 中 form-label 和 form-control 默认不水平对齐？
默认情况下，bootstrap 5 的 form-label 是块级元素，form-control 也是块级，自然垂直堆叠。这不是 bug，是设计选择——为移动优先的表单留足触控空间。
要让 label 和 input 在同一行，核心不是“强行拉平”，而是用 Bootstrap 提供的布局容器主动组织结构：
- 用
form-floating仅适用于浮动标签（label 浮在 input 上方），不解决左右并排 - 真正左右对齐得靠
row+col-*或form-check（后者仅限 checkbox/radio） - 最通用做法：把 label 和 input 包进同一个
row，再用col-auto控制 label 宽度，col让 input 自适应剩余空间
<div class="row align-items-center mb-3">
<label for="username" class="col-auto col-form-label">用户名</label>
<div class="col">
<input type="text" class="form-control" id="username">
</div>
</div>为什么加 align-items-center？
label 文字和 input 框基线默认不对齐：label 文字下沉，input 边框上沿偏高，看起来像“label 悬在 input 上方”。不加这个类，即使在同一行，视觉上仍是错位的。
align-items-center 是 flex 布局的垂直居中指令，作用于 row（本质是 display: flex），它让子项（label 和 input 所在的 div）在交叉轴（即垂直方向）居中对齐。
- 不加该类：label 文字底部与 input 边框中线基本齐平，但人眼感知仍是 label “偏高”
- 加了之后：label 文字中线、input 内容区中线、边框中线三者视觉一致
- 注意：如果 label 内容换行或 font-size 差异大，仍需微调
padding-top或line-height
Bootstrap 4 和 5 的 form-group 还能用吗？
不能依赖 form-group 实现水平对齐。Bootstrap 4 中曾用 form-group row 配合 col-form-label，但那是旧版栅格逻辑；Bootstrap 5 彻底移除了 form-group 的样式支持，仅保留语义类名，无实际布局能力。
- 继续写
<div class="form-group row">不报错，但不会自动产生栅格行为 - 必须显式使用
row+col-*才有效 -
col-form-label在 v5 里只是给 label 加点右 margin 和 font-weight，不参与布局计算
响应式断点下 label 换行导致错位怎么办？
小屏幕时，如果 label 文字长，col-auto 可能撑宽导致 input 溢出或换行。这不是对齐问题，是响应式空间分配问题。
- 方案一：对小屏改用堆叠布局，用
col-12强制 label 和 input 各占一行 - 方案二：限制 label 宽度，比如
col-sm-3 col-lg-2，让 input 在中小屏有足够空间 - 方案三：用
text-truncate+title属性保留完整提示，避免 label 过长
对齐本身没失效，失效的是你假设的“固定宽度”预期。Bootstrap 的栅格是流动的，label 和 input 的相对关系得靠断点类主动控制，不是一劳永逸。
最易被忽略的点：label 和 input 的 id/for 必须严格匹配，否则可访问性崩塌，而这对齐再漂亮也没意义。
