搜索框必须置于navbar-collapse内作为独立li元素，不可与navbar-brand并列；需加me-2防布局崩坏和键盘遮挡；图标须用bootstrap-icons；焦点触发菜单收起需data-bs-toggle或JS监听focusin与visibilitychange。
搜索框必须塞进 navbar-collapse 里，不能和 navbar-brand 并列
直接把 <input> 放在 navbar-brand 右边，小屏下要么被挤出视口，要么盖住折叠按钮——这不是样式问题，是 flex 布局的天然行为。navbar 的响应式断点靠 navbar-collapse 控制显隐，只有它里面的元素才会随屏幕缩放正确折叠。
- 正确位置：在
<div class="navbar-collapse"> 内部，作为独立的 <code><li>，里面包<form></form>+input-group - 错误写法：
<nav><a class="navbar-brand">Logo</a><input class="form-control"></nav>—— 这个input在小屏下根本不会收进去 - 语义更稳的做法：用
<ul class="navbar-nav me-auto"></ul>放导航项，再单独加一个<li>放搜索，避免混排导致的 margin/justify 异常 - 推荐加
me-2（右间距 0.5rem），若需居中或左对齐，改用mx-1或ms-2 - 别对
input-group外层再加 padding/margin，它内部已有 spacing，叠加会导致错位 - 移动端键盘弹出时，没留呼吸感的搜索框容易被遮挡，
me-2能给软键盘腾出安全缓冲区 - 最简解法：给
<input>加data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"（和-toggler 一致） - 更稳妥做法：用 JS 监听
focusin，调用bootstrap.Collapse.getInstance(...).hide() - 真要稳定，还得结合
window.addEventListener('resize', ...)捕获键盘弹出导致的 viewport 高度突变，否则某些 Android 定制系统会漏事件 - 必须引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"> - 图标放按钮里比放
input-group-text更可控，按钮加type="button"防止误提交 - 示例结构：
<div class="input-group"> <button class="btn btn-outline-secondary"><i class="bi bi-search"></i></button><input type="text" class="form-control me-2"> </div>
me-2 不是可选项，是防布局崩坏的刚需
form-control 在 navbar 里默认左右 margin 为 0，紧贴相邻文字或按钮。视觉上“粘住”，小屏折叠后还可能触发横向滚动条——尤其当搜索框右侧还有 navbar-toggler 时，iOS Safari 会直接报错“viewport overflow”。
点击搜索框不收菜单？因为 Bootstrap 不监听 input 的 focus
Bootstrap 的 collapse 机制只认 a 标签或带 data-bs-toggle="collapse" 的按钮。用户点开搜索框，键盘弹起，但菜单还开着——这是 iOS 和安卓 WebView 的共性问题，不是 bug，是设计如此。
图标要用 bootstrap-icons，别硬套旧版 glyphicon
Bootstrap 5 彻底移除了 Glyphicons，继续用 <i class="glyphicon glyphicon-search"></i> 会白屏或报 404——CDN 不再托管，CSS 也不再解析该类名。
focusin + visibilitychange 双重兜底。
