<p>form-group 不能直接水平排列，因其仅为语义容器，不参与栅格计算；正确做法是用 row 包裹、col-* 控制字段宽度，并配合 col-form-label 实现响应式对齐。</p>
form-group 本身不是布局容器，不能直接“水平排列”——强行设 display: inline-block 或 float 会破坏响应式行为、边距逻辑和小屏堆叠，这是最常踩的坑。
为什么 form-group 不能直接水平排？
form-group 是语义容器，只负责垂直间距与结构隔离，不参与栅格计算。Bootstrap 的水平对齐依赖 row + col-* 的组合，form-group 必须嵌套在 col 内才能获得宽度控制权。否则：
- label 和 input 无法对齐（
col-form-label的垂直居中逻辑失效） - 小屏下不会自动堆叠成单列
- 多个
form-group并排时，宽度失控、间隙错乱 - 使用
form-inline时，form-group会被忽略其内部 margin，导致控件挤在一起
真正有效的水平表单写法（Bootstrap 5）
用 row 包裹整行，每个字段组（label + input）各自占一列，靠 col-* 控制比例：
<form>
<div class="row mb-3">
<label for="name" class="col-sm-2 col-form-label">姓名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name">
</div>
</div>
<div class="row mb-3">
<label for="email" class="col-sm-2 col-form-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
</div>
</div>
</form>
关键点：
-
col-form-label必须和col-*配合使用，单独加无效 - label 和 input 的父级
col宽度之和应为 12（如col-sm-2+col-sm-10），否则换行或溢出 - 不要给
form-group加col-*—— 它不是栅格单元，要加在它的外层div上 - 需要多字段并排（如两个输入框同行），就用多个
col-*并列，各自包裹自己的form-group
复选框/单选框怎么横着排？别用 form-group 包一堆
form-check-inline 是唯一正解，但必须满足结构约束：
- 每个选项独立包裹：<div class="form-check form-check-inline"><input type="checkbox" id="a"><label class="form-check-label" for="a">选项A</label></div>
-
form-check不可省，否则 label 垂直对齐错位、点击区域变小 - 同组
radio必须共用name，且每个input有唯一id，label[for]严格匹配 - 父容器不能是
d-flex flex-column或flex-wrap: wrap，否则内联失效 - 小屏下自动退化为垂直排列，这是响应式设计，不是 bug
水平表单的现实代价：别只看桌面效果
水平布局在桌面端节省空间、提升录入效率，但代价明显：
- 移动端需额外测试堆叠逻辑，
col-sm-2在 xs 下可能过窄，文字折行难读 - label 长度不一时，对齐线容易错位，需统一用
col-form-label pt-0调整顶部间距 - 配合
form-floating时，col-form-label会干扰浮动 label 的定位，建议放弃浮动改用传统 label - 无障碍支持弱于垂直表单：屏幕阅读器更习惯 label → input 的线性顺序，水平排布需确保 DOM 顺序仍为先 label 后 input
真正难的不是写出能排成一行的 HTML，而是让这一行在 iPhone SE 屏上不溢出、在 NVDA 下能正确朗读、在缩放 200% 时仍可操作——这些细节比 class 名称重要得多。
