Bootstrap中form-control水平排列需用栅格系统：将form-group放入col内，col嵌套于row中，配合col-类控制宽度；label与input并排需用col-form-label与col-配合row；避免直接修改display或误用form-group为栅格单元。
form-control 是垂直堆叠的，怎么改成水平排列
Bootstrap 默认所有 form-control 都是块级元素，天然垂直排列。要水平排布，核心不是改 form-control 本身，而是用 Bootstrap 的栅格系统包裹它们，并控制父容器宽度和间距。
- 给每个表单项（
<div class="form-group">）外层加<div class="row">，内部子项用col-*-类指定宽度，比如col-md-6 - 避免直接对
form-control设置display: inline-block—— 会破坏响应式行为，且在小屏下无法自动堆叠 -
form-group本身不参与栅格布局，必须把它放进col里，否则宽度失控、边距错乱
label 和 input 怎么并排显示（非栅格）
如果只是想让单个 label 和它后面的 input 水平对齐（比如一行一个 label+input），关键是清除默认的块级换行和 margin。
- 给
label加class="col-form-label col-sm-2"，给input外层div加class="col-sm-10"，再一起包进row - 不要只给
label加float: left—— 在 Bootstrap 5+ 中已移除 float 工具类，且会干扰 flex 布局 - 若用 Bootstrap 4/5 的表单行模式，必须配对使用
form-row或row+col，否则col-form-label的垂直居中逻辑不生效
为什么用了 col 还是没水平？常见渲染失败原因
水平排列失效，90% 是因为 DOM 结构或类名层级不对，不是 CSS 写错了。
-
row必须直接包含col，中间不能插form-group—— 正确结构是：<div class="row"><div class="col"><div class="form-group">...</div></div></div> - 漏掉
form-group的mb-3或类似间距类，会导致视觉上“挤在一起”，误以为没排开 - 在
form标签上误加了flex-column或自定义display: flex; flex-direction: column，强行覆盖了 row 的 flex 行为 - Bootstrap 版本混淆：Bootstrap 3 用
form-horizontal类，但 4/5 已废弃，继续用会导致样式冲突或完全无效
移动端下如何保持水平又不失可读性
水平排列在手机上容易溢出或文字被截断，不能只靠 col-md-6 一招鲜。
- 优先用响应式断点组合，例如
col-12 col-sm-6 col-lg-4：小屏占满，中屏两列，大屏三列 - label 文字过长时，别硬撑；加
text-truncate或改用title属性提示全称 - 避免在
col内部再嵌套row—— 容易触发负 margin 折叠或间隙错位，尤其在 iOS Safari 下 - 测试真机：Chrome DevTools 的设备模拟有时不触发实际的 viewport 缩放逻辑，真实小屏下
col-12才真正可靠
form-group 当成栅格单元来用，而它从来就不是。 
