正确做法是用 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
控制流向——但更稳妥的是前者。
推荐结构：
如果 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 容器，子项默认不拉伸。
原生Bootstrap旋转木马特效
原生Bootstrap旋转木马特效是一款基于jQuery实现的图片轮播切换代码。
下载
解决方案很简单：给
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
。
在
中保留
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，比在桌面模拟器里调十次更管用。
