导航栏必须用 .navbar-collapse 包裹所有可折叠内容，否则小屏下菜单消失；下拉菜单、搜索框及所有导航项须统一置于同一 .collapse 容器内，且 ID 与 data-bs-target 严格一致；锚点链接和搜索框需添加 data-bs-toggle="collapse" 及对应 data-bs-target 才能自动收起。
导航栏结构必须用 .navbar-collapse 包裹所有可折叠内容
小屏下菜单“消失”或“只显示部分链接”，基本都是因为某些 <li> 没放进 .navbar-collapse 容器里。Bootstrap 5 的响应式折叠逻辑只作用于该类包裹内的元素，外部的链接、按钮、搜索框在 sm 以下断点会被直接隐藏。
常见错误写法：<ul class="navbar-nav"> 和搜索 <form> 分开写，一个在 .collapse 内、一个在外；正确做法是把全部导航项（含原外置的 Home、About、Contact）和搜索框统一塞进同一个 <div class="collapse navbar-collapse" id="navbarContent"> 中。
- 下拉菜单也要放在
.collapse内部，否则小屏点击“更多”后还得再点一次子菜单 -
id值（如navbarContent）必须与<button data-bs-target="#navbarContent">严格一致 - 不要用多个
.collapse容器——会导致收起逻辑错乱，比如点链接只关掉一半菜单
data-bs-toggle="collapse" 必须加在每个可点击的导航链接上
移动端点击锚点跳转后菜单卡住不收起，是因为 Bootstrap 默认只监听 .navbar-toggler 的点击，不响应 <a href="#about"> 这类内部链接。光靠 href 不会触发收起行为。
解决方法不是写 JS，而是给每个 <a> 加两个属性：
立即学习“前端免费学习笔记（深入）”；
-
data-bs-toggle="collapse"：声明它有触发折叠的能力 -
data-bs-target=".navbar-collapse.show"：精准匹配当前正在展开的那个.navbar-collapse（带.show类），避免误操作页面其他折叠组件
示例：<a class="nav-link" href="#about" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Über uns</a>
搜索框必须放在 <li> 里，且需处理聚焦时的自动收起
把 <input> 直接丢进 <nav> 或 <div class="container"> 会导致小屏布局错乱、被挤出视口，甚至触发横向滚动条。
正确位置是：<div class="collapse navbar-collapse"><ul class="navbar-nav">...<li class="nav-item"><form><div class="input-group"><input class="form-control" type="search"></div></form></li></ul></div>
- 务必加
me-2或ms-2控制左右间距，否则搜索框会紧贴相邻菜单项 - 点击搜索框时不自动收起菜单？给
<input>加data-bs-toggle="collapse" data-bs-target="#navbarContent"（注意这里用id而非.show类，更稳妥） - 别依赖
blur事件回收菜单——用户可能切到其他 App 或点别的输入框，菜单就卡住了
断点选择要匹配真实设备宽度，别硬套 lg
.navbar-expand-lg 在 992px 才展开，但 iPad 横屏是 768px，很多用户在平板上看到的还是汉堡菜单——这不是 bug，是断点没对齐真实访问场景。
- 主流手机屏宽 375–414px → 用
.navbar-expand-sm（576px 起展开），确保中等手机也能平铺 - iPad 横屏（768px）占比高 →
.navbar-expand-md更合理，比lg实用 - 如果导航项特别多（比如 8 个以上），才考虑
.navbar-expand-lg避免桌面端换行
真正麻烦的是混合设备：iOS Safari 对软键盘弹出时机敏感，安卓 WebView 表现又不同。光靠 CSS 断点不够，得结合 focusin + resize 做双重判断，而不是只改一个 class。
