Bootstrap 5 中需用 row + align-items-center + col-auto col-form-label 和 col 包裹 input 实现水平对齐；form-group 和 col-sm-2 等 v4 类已失效；复选框须用 form-check 结构；form-floating 不适用于水平布局。
Bootstrap 5 中怎么让 label 和 input 水平对齐
bootstrap 5 默认就是垂直堆叠，form-label 和 form-control 都是块级元素，直接写在一起必然上下排列。水平对齐不是“开启某个开关”，而是用栅格系统主动组织结构。
- 必须用
row包裹 label 和 input 所在的容器，不能只靠form-horizontal（该类在 v5 已被移除） -
label加col-auto col-form-label，让文字宽度自适应内容 - input 外层套
div class="col"，让它占满剩余空间 - 一定要加
align-items-center到row上，否则 label 文字和 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>
为什么不能继续用 form-group row 或 col-sm-2
form-group 在 Bootstrap 5 中已无布局能力，只是语义类；col-sm-2 这类旧版栅格类虽不报错，但行为不可靠——它依赖已废弃的 form-horizontal 上下文，在 v5 中不会自动对齐或响应式换行。
- v4 的
form-group row+col-form-label是历史写法，v5 不再支持其栅格逻辑 -
col-sm-2在小屏下可能撑不开、label 被截断，或 input 溢出容器 - 真正响应式的做法是用
col-auto控制 label 宽度，col让 input 自适应，天然适配 xs → xxl
复选框/单选按钮怎么水平对齐
它们不能套 row + col 做左右对齐，因为语义和交互逻辑不同。Bootstrap 5 提供了专用结构：form-check。
- 把
input[type=checkbox]和label包进div class="form-check" - label 加
form-check-label，input 加form-check-input - 如需 label 和 checkbox 并排且带描述文字，就用
form-check-inline替代form-check
错误写法：<label class="col-auto">同意条款</label><input type="checkbox" class="col"> —— 这会破坏可访问性，也失去点击 label 触发 checkbox 的能力。
浮动标签（form-floating）是不是水平布局替代方案
不是。form-floating 是让 label 浮在 input 上方，属于「视觉分层」，不是「左右并排」。它解决的是占位符易丢失、移动端输入焦点提示弱的问题，和水平布局无关。
- 用了
form-floating，label 仍为块级，input 仍独占一行 - 若强行把它塞进
row，label 会脱离 input 上方位置，样式崩坏 - 需要水平对齐时，
form-floating和row + col是互斥方案，别混用
对齐这事看着简单，实际卡点全在 flex 基线、栅格语义迁移、和可访问性约束上——漏掉 align-items-center 或硬套 v4 类名，十有八九半天调不好。
