搜索框必须放入 navbar-collapse 内部的独立 li 中，否则小屏下不渲染；需加 me-2 防 viewport 溢出，用 form-control-sm 和 btn-sm 对齐高度，并为 input 添加 data-bs-toggle="collapse" 收起菜单。
搜索框必须塞进 navbar-collapse 里，否则小屏下直接消失
Bootstrap 5 的响应式逻辑全靠 navbar-collapse 控制显隐。把 <input class="form-control"> 直接写在 navbar-brand 后面，或者和 navbar-nav 并列，小屏折叠后它就从 DOM 流中彻底消失了——不是隐藏，是压根没渲染进去。
正确做法是把它作为独立的 <li> 塞进 navbar-collapse 内部：
<div class="navbar-collapse collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item">...</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search"><button class="btn btn-outline-secondary" type="submit"><i class="bi bi-search"></i></button>
</form>
</li>
</ul>
</div>
- 别用
navbar-nav ms-auto包整个form—— 它会随导航项一起收进汉堡菜单，用户点开菜单才能看到搜索框，体验割裂 - 如果想让搜索框「始终可见」（包括小屏），那就别放
navbar-collapse里，改用ms-auto放在navbar直接子级，但要手动处理 iOS 键盘遮挡问题 - 确保引入了
bootstrap-iconsCSS，<i class="bi bi-search"></i>才能显示；用旧版glyphicon会白屏
me-2 不是装饰，是防 viewport overflow 的刚需
form-control 在 navbar 里默认左右 margin 为 0，紧贴相邻元素。小屏下右侧若有 navbar-toggler，iOS Safari 会直接报 viewport overflow 错误，页面横向滚动条弹出，甚至键盘无法呼起。
me-2 提供 0.5rem 右间距，既是视觉呼吸感，也是移动端软键盘弹出时的安全缓冲区：
- 不要对
input-group外层再加margin或padding—— 它内部已有 spacing，叠加会导致错位 - 若搜索框需左对齐或居中，改用
ms-2或mx-1，别硬套ml-2（Bootstrap 5 已废弃ml/mr） - 不加间距的后果不是“难看”，而是真会触发 Safari 的 viewport 溢出保护机制，导致输入框失焦或键盘闪退
点击搜索框不收菜单？因为 collapse 根本不监听 input 的 focus
Bootstrap 的折叠逻辑只响应 a 标签或带 data-bs-toggle="collapse" 的按钮点击。用户点开搜索框，键盘弹起，但汉堡菜单还开着——这不是 bug，是设计如此。iOS 和 Android WebView 表现一致，尤其在第三方浏览器里更明显。
最简解法：给 <input> 加上 data-bs-toggle="collapse" data-bs-target=".navbar-collapse"，让它点击时主动收起菜单：
<input class="form-control me-2" type="search" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" placeholder="Search">
- 这个写法够用，但不够稳：用户切到别的 App 再切回来，菜单可能卡在展开态
- 真要稳定，得监听
focusin+visibilitychange+resize（捕获 viewport 高度突变），否则某些 Android 定制系统会漏事件 - 别在按钮上同时写
data-bs-toggle和手写 JS 的collapse('toggle')，状态容易冲突
form-control-sm 是高度对齐的关键，不是可选项
默认 form-control 高度约 38px，而 Bootstrap 5 navbar 默认高度是 56px。不处理的话，搜索框上下留白、按钮错位、垂直居中失效——看起来像“悬浮”在导航栏里。
必须显式降级尺寸：
- 给
<input>加form-control-sm（BS5）或input-sm（BS4） - 配套的
<button></button>也要加btn-sm，否则按钮会撑高整个 navbar - 如果用了
input-group，确保整个input-group在navbar-collapse内部，而不是只包input - 避免用
style="height: 100%"硬撑——flex 布局下它常失效；用calc(100% - 2px)更可靠
真正麻烦的不是写法，而是不同设备对软键盘弹出时机的判断差异：iOS 先 resize 再 focus，部分安卓机型先 focus 再 resize，还有 WebView 直接不触发 resize。只靠 CSS 类切换，注定在某个机型上失效。
