真正隐藏手机端导航栏菜单项应使用 d-none d-lg-block 类组合，使元素在小屏彻底退出文档流，确保无障碍友好、不占位、不聚焦，而非仅视觉隐藏。
手机端隐藏导航栏部分菜单项，别碰 display: none
直接给某个 <li> 或 <a> 加 d-none d-sm-block 看似能“隐藏”，但 DOM 仍在、焦点还在、屏幕阅读器照读不误，还会干扰 navbar-collapse 的高度计算，导致下拉菜单被截断或撑不开。真正要隐藏的是“交互语义”，不是“视觉像素”。
- 用
data-bs-toggle="collapse"控制的折叠区域（.navbar-collapse）本身不支持“部分子项隐藏”，它只管整体显隐 - 想在小屏下隐藏特定菜单项（比如“关于我们”“招聘”），必须把它们从折叠容器里抽出来，改用条件渲染逻辑
- 最稳妥的做法：在 HTML 中为每个菜单项加响应式类，如
nav-item d-none d-lg-block—— 这表示“仅在 ≥992px 显示”，小屏自动移出文档流，不占位、不聚焦、无障碍友好 - 不要写
d-lg-none单独控制隐藏，它没断点前缀，会在所有尺寸生效；必须是d-none d-lg-block这种“先隐藏、再指定断点显示”的组合
navbar-nav 里怎么让某些 nav-link 只在桌面显示
Bootstrap 5 的栅格和工具类对导航项同样有效，关键是层级关系要对：菜单项必须是 .navbar-nav 的直系子元素（即 <ul class="navbar-nav"><li class="nav-item">...</li></ul>），否则响应式类不生效。
- 给不需要出现在手机端的
<li class="nav-item">加d-none d-lg-flex（BS5）或d-none d-lg-block（BS4），确保它在小屏彻底退出布局流 - 中间主菜单项（如首页、产品）保持默认，不加任何
d-*类，让它自然响应所有断点 - 如果用了
flex-fill或flex-grow-1均分空间，记得把隐藏项移除后重新测试宽度分配，避免剩余项被异常拉伸 - 避免在
nav-link上写内联style="display: none"，它会覆盖所有 Bootstrap 响应式类，且无法被 JS 动态恢复
隐藏后点击锚点跳转，导航栏卡住不显示？
这不是菜单没隐藏好，而是滚动监听逻辑和浏览器锚点行为冲突了。当你监听 scroll 来控制 navbar 显隐，又点了 #contact 这类页面内链接，浏览器会强制滚动并触发多次 scroll 事件，导致 .hidden 类在动画中途被反复切换，最终停在 translateY(-50%) 这种半隐藏状态。
- 解决办法：在锚点跳转时临时禁用滚动隐藏逻辑，例如监听
click事件捕获a[href^="#"]，设个 flag 如skipHide = true，并在 scroll 处理函数开头加if (skipHide) return - 300ms 后自动恢复（用
setTimeout(() => skipHide = false, 300)），因为锚点滚动通常在这段时间内完成 - 更健壮的做法是监听
hashchange事件，在 hash 变化后重置 navbar 状态，而不是依赖 scroll 持续判断 - 千万别用
position: sticky+transform组合做自动隐藏——sticky 在锚点跳转时行为不稳定，尤其 iOS Safari
用 offcanvas 替代“隐藏菜单项”是否可行？
不行。offcanvas 是为整块侧边内容设计的（比如完整侧边栏），不是用来藏几个导航链接的。把它套在单个 nav-link 上会导致定位错乱、遮罩层不出现、键盘关闭失效，而且语义错误——屏幕阅读器会把它当独立可操作面板，而非导航的一部分。
- offcanvas 必须包裹在
.container-fluid或同级位置，不能嵌在.navbar-nav内部 - 它的
data-bs-target必须指向一个独立 ID 元素，不能指向.nav-link这类行内元素 - 如果你发现“隐藏菜单项”需求背后其实是“移动端需要更紧凑的导航结构”，那应该重构为全屏遮罩菜单（
offcanvas包裹整个.navbar-collapse），而不是零散隐藏 - 真要动态控制单个菜单项，JS 方案比 CSS 更可控：用
document.querySelectorAll('.nav-link[data-hide-mobile]')批量移除/添加，再配合resize事件重置
