bootstrap搜索框需满足三要素：必须用带role="search"的form包裹，input type设为"search"，且结构严格遵循input-group规范；父容器需加flex-nowrap、input加flex-grow-1和min-width:0；移动端需通过data-bs-toggle干预navbar收起。
Bootstrap 搜索框不是加个 class="form-control" 就能响应式，关键在结构层级、父容器约束和移动端行为干预。漏掉任意一环，小屏下要么撑出滚动条，要么键盘弹出后遮住输入框。
搜索框必须用 form 包裹并设 role="search"
不套 form 标签的搜索框，在语义、无障碍和提交逻辑上全失效。iOS 键盘不会显示“搜索”按钮，回车也不触发提交，屏幕阅读器直接跳过它。
必须满足三点：
-
form标签要带role="search"—— 这是 WAI-ARIA 规范强制要求 -
input的type必须为"search"，不能是"text" - 别用
div+span模拟表单——.input-group和.form-control只对真实表单元素生效
input-group 结构不能错，图标和按钮位置有硬规则
Bootstrap 不靠 Flex 手动排按钮，而是依赖 input-group 的 DOM 顺序。常见错误是把按钮塞到 input-group 外面，或图标没加 .input-group-text 类。
正确结构只有这一种：
<div class="input-group"> <input type="search" class="form-control"><button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button> </div>
注意：
- 图标必须用
<i class="bi bi-search"></i>，引入bootstrap-iconsCSS，别用已废弃的glyphicon - 按钮加
type="submit"，否则回车无法触发表单提交 - 如果只留图标、隐藏文字，用
d-flex d-md-none控制显示，别用display: none硬删
导航栏里搜索框宽度失控？min-width: 0 是关键
小屏下搜索框被截断或撑出横向滚动条，根本原因是 .form-control 默认 width: 100%，但父容器没做弹性收缩控制。强行设 max-width 会破坏断点响应。
解法是组合使用：
- 外层包
<div class="input-group flex-nowrap"> <li> <code>input加class="form-control flex-grow-1"和内联样式style="min-width: 0;"（缺一不可） - 别在
input上写width: 100%—— 它和 flex 布局冲突 - 在 navbar 中，优先用
ms-auto（不是ml-auto）控制右对齐，兼顾 RTL 支持 - 别只靠 CSS 类切换，某些 Android WebView 对
visibilitychange不敏感 - 如果页面有多个折叠区，
data-bs-target必须精确指向目标.navbar-collapse - 搜索框必须放在
.navbar-collapse内部，否则小屏下直接消失
移动端点击搜索框，菜单不收起？得手动干预 focus
Bootstrap 的 navbar-collapse 默认只监听按钮和链接的点击，input 聚焦不会触发收起。结果就是 iOS/Android 键盘弹出，折叠菜单还盖着一半屏幕。
最简方案是给 input 加属性：data-bs-toggle="collapse" data-bs-target=".navbar-collapse"。但更稳的做法是监听 focusin 事件，用 JS 主动调用 bootstrap.Collapse.getInstance().hide()。
还要注意：
真正卡住人的从来不是 class 名写错，而是 min-width: 0 漏了、role="search" 忘了、或者以为加了 form-control 就自动适配 navbar 高度——其实还得加 form-control-sm 或手动调高度。
