内联表单移动端不换行需加 flex-wrap: wrap；提交按钮ios点击无效多因 .dropdown-backdrop 遮挡或表单误嵌入 标签；android输入框聚焦失败主因是 .form-control 缺少 min-height 和 padding；ios搜索框按钮错位需设 .input-group > * { flex-shrink: 0; }。
内联表单在移动端不换行、文字重叠怎么办
Bootstrap 的 .form-inline 类（Bootstrap 4）或 .row.g-2 + .col-auto 组合（Bootstrap 5）在小屏下默认不自动换行，导致控件挤成一团、文字被截断甚至按钮不可点。这不是“失效”，而是它本就不承诺响应式断行——它只负责水平排列，断点行为得你手动补。
- Bootstrap 4 的
.form-inline在sm断点以下直接退化为块级堆叠，但若父容器有white-space: nowrap或子元素设了flex-shrink: 0，就会卡住不换行 - Bootstrap 5 已移除
.form-inline，官方推荐用.row+.col-auto，但若没配flex-wrap: wrap，小屏照样溢出 - 最常见诱因：给
.form-control设了固定width（如width: 200px），或对整个表单加了display: flex却忘了加flex-wrap: wrap
修复只需一行 CSS：.form-inline, .form-row { flex-wrap: wrap; }，再确保每个控件用 .col-auto 或 flex: 1 1 auto 分配弹性空间。
提交按钮在 iOS Safari 点击无反应
移动端点击 type="submit" 按钮后页面刷新但表单没提交，大概率是按钮被 .dropdown-backdrop 遮挡，或表单外层意外套了 @#@#@#@#@#@#@#@#@#@0 里；哪怕只是文字链接触发 modal，也绝不能把 <form></form> 嵌进 <a></a> 内部
输入框在 Android WebView 中无法聚焦
部分安卓 WebView（尤其旧版系统或定制 ROM）对 input 的 touchstart 响应延迟，表现为点击后光标不出现、键盘不弹出。
- 根本原因是
.form-control缺少明确的min-height和padding，导致触摸热区过小；Android 会忽略高度的可点击区域 - 强制设置：
.form-control { min-height: 48px; padding: 0.375rem 0.75rem; }（注意单位用 rem，适配缩放） - 避免对
input设置transform、will-change或opacity: 0.99—— 这些会触发 Android 的合成层切换，干扰焦点捕获 - 如果用了第三方键盘优化库（如 fastclick），和 Bootstrap 的原生 focus 事件冲突，建议停用
搜索框右侧按钮在 iPhone 上错位或消失
带 .input-group 的搜索框在 iOS Safari 下常出现右侧按钮（如 .btn 或 .btn-close）偏右、被裁切，甚至点击区域失效。
- 核心问题是
.input-group默认用display: table（Bootstrap 4）或display: flex（Bootstrap 5），但 iOS 对table-cell的vertical-align渲染异常敏感 - Bootstrap 5 推荐方案：改用
.input-group+.input-group-text+.form-control，并确保所有子项都有flex-shrink: 0（防止 iOS 弹性收缩） - 关键兜底样式：
.input-group > * { flex-shrink: 0; }，否则 iOS 可能把按钮宽度压到 0 - 如果按钮是图标（如 Font Awesome），确认字体加载完成后再渲染表单——未加载时图标占位符宽高为 0，会破坏布局
真正麻烦的不是写法，而是这些组件在不同 WebView 中的行为差异：iOS Safari 对 flex 的处理比 Chrome 更严格，而某些安卓厂商 WebView 会静默忽略 min-height。测试不能只靠 Chrome DevTools 模拟，真机连测至少覆盖 iOS 16+ 和 Android 12+ 主流机型。
