bootstrap导航栏小屏折叠需结构合规、js加载正常；中屏断行应优先用响应式类而非强制换行；自定义样式宜用间距类避免破坏hover效果；js激活当前项须注意路径匹配与执行时机；自适应依赖html语义、js行为及viewport标签协同。
导航栏在小屏上自动折叠成汉堡菜单
bootstrap 默认的 .navbar 在移动端会自动收起为折叠按钮，但前提是结构合规、js 正常加载。常见错误是漏掉 data-bs-toggle="collapse" 或没写 id 对应的 .collapse 容器。
必须确保：
- 导航外层有 .navbar 和响应式容器（如 .container-fluid）
- 折叠触发按钮带 data-bs-toggle="collapse" 和 data-bs-target="#navMenu"
- 导航列表包裹在 <div class="collapse navbar-collapse" id="navMenu"> 内
- Bootstrap JS 已加载（否则点击无反应，控制台也无报错，容易误判为 CSS 问题）<h3>横向导航项在中等屏幕断行错乱</h3>
<p>默认 <code>.navbar-nav 是 flex 布局，.nav-item 默认 flex-shrink: 0，所以长文本或过多菜单项会在中屏（如 tablet 横屏）下撑出横向滚动条，而非换行。
解决办法不是强行换行，而是用响应式类控制显示逻辑：
- 给 .nav-item 加 d-none d-lg-block，让其在 lg+ 屏才显示
- 配合 .dropdown 把次级入口收进下拉菜单（避免堆砌）
- 若真需换行，改用 .flex-column flex-lg-row 控制方向，但注意这会破坏水平对齐逻辑，慎用
自定义宽度和间距导致 hover/active 样式失效
很多人直接给 .nav-link 设 width 或 padding，结果 hover 背景色不贴合、下划线偏移、甚至点击热区变小。根本原因是 .nav-link 默认是 display: block，但部分样式依赖 ::after 伪元素或内部 span 结构。
更稳妥的定制方式：
- 用 px-* / py-* 类调整内边距（如 px-4 py-2），避免直接写 padding
- 宽度交给父容器控制（如 .nav-justified 或 text-center + flex-fill）
- 修改 hover 背景时，优先覆盖 .nav-link:hover 的 background-color，别动 border-radius 或 margin，否则影响折叠动画
用 JavaScript 动态激活当前导航项失效
手动调用 document.querySelector('.nav-link[href="'+window.location.pathname+'"]').classList.add('active') 很常见，但容易踩两个坑：路径匹配不准、执行时机太早。
推荐做法：
- 用 location.pathname.replace(/\/$/, '') === '/home' 去掉末尾斜杠再比对
- 把脚本放在
