正确做法是用 form-row 包裹字段，label 和 input 分别置于不同 col-* 列中；小屏单栏用 col-12 col-sm-6；input 需加 flex-fill 或 w-100 撑满；避免将整个 form-group 塞入一列。
用 form-row + col-* 布局两栏表单，别套 row 里再塞 form-group
Bootstrap 4/5 的响应式两栏表单，核心不是靠浮动或 flex 手动调，而是用内置的栅格语义组合。常见错误是把 form-group 当容器一层层嵌，结果在小屏下依然并排、字段重叠或错位。
正确做法是：用 form-row（非普通 row）包裹一组水平排列项，每个字段直接用 col-sm-6 或 col-md-4 控制宽度。它内部已设 display: flex 和负边距，能更好处理表单控件间距。
-
form-row是专为表单优化的 flex 容器，比普通row的margin更紧凑 - 字段标签（
label）和输入框（input）建议分别包在col-*内，避免 label 挤占控件空间 - 小屏下想变单栏？直接用
col-12 col-sm-6，col-12覆盖 xs 尺寸，不用额外写媒体查询
Label 和 input 必须分列，否则 col-* 宽度失效
很多人把整个 form-group（含 label + input）塞进一个 col-sm-6，以为能“占半宽”。实际 label 默认块级、input 默认行内，它们会垂直堆叠，导致视觉上仍是单栏，且右侧留白。
必须拆开：label 单独占一列，input 单独占一列，或者 label + input 同属一列但用 flex-column 控制流向——但更稳妥的是前者。
- 推荐结构：
<div class="form-row"> <div class="col-sm-3"><label>姓名</label></div> <div class="col-sm-9"><input></div> </div> - 如果 label 短、想左对齐输入框，可合并为
col-sm-6，但里面要用form-label+form-control，并确保无多余margin干扰 - Bootstrap 5 中
form-label默认有margin-bottom: 0.5rem，若与 input 同列，需加mb-0抑制
遇到 form-control 撑不满列宽？检查是否漏了 width: 100% 或父级 flex 设置
常见现象：input 在 col-sm-6 里只显示半截，右边大片空白。这不是栅格没生效，而是 form-control 默认只在 block 容器中自动撑满——而 form-row 是 flex 容器，子项默认不拉伸。
解决方案很简单：给 input.form-control 加 flex: 1，Bootstrap 本身已预置 .w-100 和 .flex-fill 工具类，比手写 CSS 更可靠。
- 直接加
class="form-control flex-fill"（Bootstrap 5）或class="form-control w-100"（Bootstrap 4） - 别依赖
col-*自动让子元素填满——它只控制父容器宽度，不控制子元素渲染行为 - 若用了
input-group，记得把flex-fill加在input上，而不是input-group容器上
移动端键盘弹出时布局错乱？禁用 viewport 缩放不是万能解
两栏表单在 iOS Safari 或部分安卓浏览器中，点击 input 弹出软键盘后，页面可能被缩放、列宽突变甚至内容被裁切。这不是 Bootstrap 的 bug，而是浏览器对 viewport 的响应逻辑问题。
关键不是加 user-scalable=no（这会让用户无法缩放，体验更差），而是确保表单区域有明确的最小宽度约束，并避免在 form-row 上设固定 min-width。
- 在
<meta name="viewport">中保留width=device-width, initial-scale=1，去掉maximum-scale和user-scalable - 给最外层表单加
class="px-3"（Bootstrap 5）或内边距，防止键盘顶起时内容贴边消失 - 测试真机时重点看
col-12 col-sm-6 col-lg-4这类多断点类名是否在软键盘收起后正确恢复，如有延迟，可能是 JS 监听了resize但未 debounce
响应式表单最难的从来不是怎么写两栏，而是怎么让 label、input、验证提示、错误边框、键盘交互全在不同尺寸和状态下保持对齐和可用。多在真机上点几次 input，比在桌面模拟器里调十次更管用。
