bootstrap 5 完全移除了 form-horizontal、control-label、col-sm-offset-2 等旧类，因其转向 flexbox 布局并弃用浮动逻辑；替代方案是用 row + col-* 列宽类 + align-items-center + gap 工具类手动构建响应式水平表单，桌面端左右分置、小屏自动堆叠。
Bootstrap 5 中没有 form-horizontal 类了
直接说结论：Bootstrap 5 完全移除了 form-horizontal、control-label、col-sm-offset-2 这类专用于“水平表单”的旧类。如果你照着 Bootstrap 4 或更早文档写，页面会完全错位——标签堆在输入框上方，对不齐，间距失控。
原因很实际：Bootstrap 5 全面转向 Flexbox 布局，放弃浮动（float）和旧栅格的偏移逻辑，用语义更清晰、控制更灵活的工具类替代。强行保留旧类会增加维护负担，且与 flex 排列冲突。
替代方案是组合使用：row + col-* 列宽类 + align-items-center（垂直居中）+ gap 工具类。这不是“退化”，而是把控制权交还给开发者。
用 row 和 col 手动构造响应式水平表单
核心思路：把每组 label + input 拆成两个并排的列，用栅格断点控制不同屏幕下的宽度比例。
- 桌面端（
md及以上）：标签占 2 列，输入框占 10 列 —— 保持传统水平对齐 - 平板/小屏（
sm及以下）：标签占 12 列，输入框也占 12 列 —— 自动堆叠为垂直布局 - 必须包裹在
row内，否则col类不生效；row本身有负 margin，需确保父容器是container或container-fluid
示例结构：
为什么不用 form-floating 替代？它不是更“现代”吗？
form-floating 是 Bootstrap 5 新增的浮动标签（floating label）模式，标签默认浮在输入框上方，聚焦后上浮。它视觉清爽，但不是水平表单的替代品——它的标签始终和输入框共用一列，无法左右分置，也不支持响应式断点控制标签宽度。
适用场景有限：
- 表单字段少（≤ 4 个）、空间紧凑（如登录弹窗、侧边栏设置）
- 不需要标签右对齐或固定宽度对齐的场景
- 可接受所有设备下都保持“浮动”行为（不堆叠）
一旦你需要“桌面横排、手机竖排”，或者要让标签右对齐（text-end）、加粗（fw-bold），form-floating 就无能为力，必须退回 row+col 方案。
容易被忽略的兼容性细节
真正上线时卡住人的往往不是结构，而是几个细节点：
-
col-form-label必须加，否则标签字体大小、行高、上下 margin 不符合 Bootstrap 表单规范，和form-control对不齐 -
align-items-center加在row上，否则小屏堆叠时，标签和输入框的 baseline 会错位（尤其含图标或辅助文字时） - 提交按钮别硬塞进同一
row—— 它通常需要独占一行或右对齐，建议单独用row包裹，并加justify-content-end - 如果用了自定义表单控件（如
custom-select或第三方日期选择器），它们可能没继承form-control的 flex 基线对齐，得手动加align-self-center
最麻烦的其实是老项目升级：删掉所有 form-horizontal 后，要逐个检查 label 和 input 的垂直对齐、响应断点是否按预期切换，不能只看桌面端效果。
