Bootstrap 4+ 已移除 form-horizontal，需用 row+col 实现水平表单：label 用 col--2 + col-form-label，控件用 col--10，配合响应式断点控制布局。
Bootstrap 水平表单（form-horizontal）在 Bootstrap 4+ 中已被移除，直接用它会完全失效——这不是你代码写错了，是框架本身不支持了。
为什么 form-horizontal 不起作用
Bootstrap 4 彻底废弃了 form-horizontal 类及其配套的 form-group + control-label 布局逻辑。如果你从 Bootstrap 3 升级过来，照搬旧 HTML，表单会变成垂直堆叠，标签和控件上下排列，毫无“水平”可言。
根本原因：Bootstrap 4 转向基于 Flexbox 的响应式栅格系统，所有布局都靠 row、col 和工具类控制，不再内置表单方向语义类。
-
form-horizontal在 Bootstrap 4/5 中不存在，CSS 文件里搜不到 -
control-label已被form-label替代，且默认无浮动或宽度约束 - 旧的
form-group仍可用，但仅作语义分组，不参与布局
用 row + col 实现真正的水平对齐
核心思路：把标签和控件放在同一行的两个并列栅格中，用 col-auto 或固定列宽（如 col-md-3）控制标签宽度，控件占剩余空间。
示例（Bootstrap 5）：
<form>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
</form>
- 必须用
row包裹每组，否则col不会水平对齐 -
col-sm-2控制标签宽度（小屏及以上生效），col-sm-10让控件填满剩余空间 -
col-form-label是关键——它自动添加padding-top: 0.5rem和垂直居中对齐，不用额外写 CSS - 如果 label 内容长，建议加
text-break防止溢出
处理多控件同行、响应式断点与辅助文本
水平表单常遇到“一行放多个输入框”或“小屏下自动转垂直”的需求，不能只靠固定 col-*。
- 同行多个控件：用
row+ 多个col，比如两个col-md-6并排，label 用col-md-2，控件区域再分两列 - 小屏垂直堆叠：把
col-sm-2改成col-12 col-sm-2，这样手机上 label 宽 100%，PC 上才收缩为 2 列 - 辅助文本（help text）：放在控件
div内部，紧贴input下方，用form-text类，避免撑开整行高度 - 必填标记（*）建议放在
label内，不要用::after伪元素——否则响应式换行时容易错位
真正难的不是写几行 HTML，而是理解 Bootstrap 4+ 把“布局责任”完全交还给栅格系统。标签要不要左对齐、控件要不要撑满、小屏要不要重排，每个决策都要落在具体的 col 类和断点上，没法靠一个 class 全局搞定。
