<p>Bootstrap 5 响应式导航栏中搜索框必须置于 navbar-collapse 内部并与 navbar-nav 并列，配合 navbar-expand-* 断点类控制显示时机，使用 form-control-sm、rounded-0 等类对齐样式，并通过 JS 在 focus 时手动隐藏折叠菜单。</p>
Bootstrap 5 响应式导航栏加搜索框，form 必须放在 navbar-collapse 内部
直接把 <form> 塞进 navbar-nav 或丢在 navbar 外层，搜索框会错位、不折叠、移动端点击无反应。bootstrap 5 的响应式逻辑依赖 navbar-collapse 的 css 类和 js 控制，搜索输入框只有作为其子元素，才能随菜单一起收起/展开。
常见错误现象：Search 按钮始终显示，移动端下拉菜单里搜素框消失，或者输入框被挤到右侧溢出。
- 把
<form>放在<div class="collapse navbar-collapse">内部，和<ul class="navbar-nav">并列 - 给
form加class="d-flex"或class="ms-auto"控制水平位置（如靠右） - 输入框用
<input type="search">而非text，语义更准，部分浏览器会自动添加清除按钮
navbar-expand- 断点决定搜索框何时“露出来”
搜索框是否在小屏显示，不是由 JS 控制，而是靠 Bootstrap 的响应式类决定。比如设为 navbar-expand-lg，那只有在 lg（≥992px）及以上宽度时，整个 navbar-collapse 才默认展开——此时搜索框才可见；小于该断点时，它会收进折叠菜单里。
如果你希望搜索框在中等屏（md）就显示，就把 navbar-expand-lg 换成 navbar-expand-md；反之，若只希望桌面端显示，保留 lg 即可。
- 断点名必须和
navbar-expand-*后缀一致，否则折叠逻辑失效 - 不要同时写多个
navbar-expand-类，Bootstrap 只认最后一个 - 若想让搜索框始终可见（包括手机），可去掉
collapse结构，但会失去响应式折叠能力
搜索框样式微调：避免 input 高度不匹配
默认 form-control 在 navbar 里显得矮、边框太粗、圆角过大，和导航链接高度不齐。这不是 bug，是 navbar 对子元素有预设 line-height 和 padding。
解决办法不是重写全部样式，而是用 Bootstrap 已提供的工具类快速对齐：
- 给
input加class="form-control-sm"缩小内边距 - 加
style="height: calc(1.5em + 0.75rem + 2px)"（对应nav-link高度），或直接复用nav-link的height值 - 移除
border-radius：加rounded-0，保持和导航项视觉统一 - 如果用了
btn-group包裹搜索框+按钮，记得加flex-nowrap防止换行
移动端点击搜索框后，折叠菜单没自动关闭？检查 data-bs-toggle
用户点开折叠菜单 → 点击搜索框 → 键盘弹出 → 菜单仍开着，遮挡输入区域。这是因 input 聚焦不会触发 navbar-collapse 的隐藏逻辑，需要手动干预。
最轻量的解法是加一行 JS，在搜索框获得焦点时主动隐藏折叠菜单：
document.querySelector('input[type="search"]').addEventListener('focus', () => {
const bsCollapse = bootstrap.Collapse.getInstance(
document.querySelector('.navbar-collapse')
);
if (bsCollapse && bsCollapse._isShown) {
bsCollapse.hide();
}
});
注意：这段代码必须在 Bootstrap 的 JS 已加载、且 DOM 就绪后执行；如果页面有多个折叠区，需限定作用范围。别漏掉 bootstrap 全局对象——CDN 引入时它就在 window 上，模块引入则需显式导入。
容易被忽略的是：这个行为在 Safari iOS 上尤其明显，因为软键盘弹出会强制重排，而其他浏览器可能“刚好没挡住”。别只在 Chrome 里测试。
