navbar-expand-*类漏写或断点错配是主因：该类为折叠开关，漏写则.navbar-toggler隐藏且js不绑定；断点错配（如误用sm/md/lg）导致展开时机错误；css覆盖display:none、max-height截断或父容器样式干扰亦会破坏折叠效果。
navbar-expand-*类漏写或断点错配是主因
Bootstrap 5 的导航栏默认不折叠，navbar-expand-* 不是可选项，而是开关。漏写这个类，.navbar-toggler 按钮直接被隐藏，JS 也不绑定事件，整个折叠流程从源头失效。
常见错误包括：
- 写了
navbar-expand（无后缀）→ 等价于navbar-expand-lg，但语义模糊，部分构建工具会过滤掉 - 误用
navbar-expand-sm→ 在手机横屏（常 ≥640px）就展开，竖屏才折叠，体验割裂 - 该用
navbar-expand-md（≥768px 展开）却写成navbar-expand-lg→ 平板横屏也不折叠，用户摸不着头脑
断点值不是“猜测”，而是硬编码在 CSS 媒体查询里：@media (min-width: 768px) 对应 md。改了 Sass 变量 $grid-breakpoints 却没重编译 CSS？那 HTML 写着 navbar-expand-md，实际仍按 768px 判断。
折叠菜单展开后内容被截断
这不是 JS 失效，而是 .navbar-collapse 的 max-height 动画用了固定估算值（如 1000px），子项真实高度超出了它，就被 overflow: hidden 截断。
修复建议：
- 删掉所有手动加的
max-height或height，避免干扰原生过渡 - 用足够大的像素值覆盖：例如
.navbar-collapse.show { max-height: 120vh !important; } - 不用
100%或fit-content—— 它们不触发过渡动画 - 若导航项少（如仅 3–4 个链接），可精确估算：每项约 48px，加余量写成
max-height: 200px更轻量
CSS 覆盖导致 collapse 状态失效
即使 navbar-expand-* 写对、JS 加载正常，只要有一条高优先级 CSS 把 .navbar-collapse.collapse 的 display: none 覆盖掉，菜单就会“卡开”不动。
检查重点：
- 浏览器开发者工具中看小屏下
.navbar-collapse是否仍有display: block（应为display: none） - 搜项目中是否有全局重置如
.collapse { display: block !important; } - 父容器是否设了
overflow: hidden或transform，导致展开内容被裁剪或定位异常 -
.navbar或其祖先是否误加flex-wrap: wrap，干扰 collapse 渲染判断
移动端点击链接后菜单不收起
Bootstrap 5 默认不监听 .nav-link 的点击事件来收起菜单，这不是 bug，是设计如此。你看到菜单“卡开”，是因为跳转后 .show 类还留在 .navbar-collapse 上。
最稳妥的 CSS+JS 混合方案：
- 保留
href，不给.nav-link加data-bs-toggle="collapse"（易与跳转冲突） - 用 JS 监听点击：查
bootstrap.Collapse.getInstance()是否存在且已展开，再调hide() - 关键条件：必须等 DOM 加载完再执行，否则
getInstance()返回null - 锚点跳转（
href="#about"）同样适用，但若用了平滑滚动库并preventDefault()，就得回退到事件监听方案
真正容易被忽略的，是断点类本身不触发任何 JS —— 它只是媒体查询的开关。一旦你发现点击汉堡图标后 .show 类成功加上，但内容不可见，问题一定出在 CSS 渲染层，不是 JS 绑定失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
