移动端不折叠主因是navbar-expand-*类断点误用；它决定“从该断点起展开”，如navbar-expand-md表示≥768px展开、
移动端不折叠，八成是 navbar-expand-* 类写错了断点，而不是 JS 没加载或属性拼错。
navbar-expand-* 的断点值必须匹配你期望的折叠时机
Bootstrap 5 不会“自动判断小屏”，它只认 navbar-expand-sm、navbar-expand-md、navbar-expand-lg 这类明确断点的类。写了哪个，就表示「从该断点起展开」，低于它才折叠。
-
navbar-expand-sm：≥576px 展开 → 手机横屏（常 ≥640px）就展开了，竖屏才折叠 -
navbar-expand-md：≥768px 展开 → 平板横屏才展开，多数手机始终折叠 -
navbar-expand-lg：≥992px 展开 → 桌面才展开，手机和平板都折叠（最常用） -
navbar-expand（无后缀）：等价于navbar-expand-lg，不是“全设备展开” - 写成
navbar-expand-xl却没意识到要缩到 ≥1200px 才折叠，用户拿 iPhone 看根本不动
自定义断点时，CSS 和 SCSS 必须同步更新
如果你改过 Bootstrap 的 $grid-breakpoints 变量（比如把 md 改成 800px），但只编译了 JS、没重编译 CSS，那媒体查询还是按原值生效——HTML 写着 navbar-expand-md，实际断点却是 768px，行为就错位了。
- 检查最终 HTML 中
加载的 CSS 文件是否是你重编译后的版本 - 在浏览器开发者工具里查
.navbar-expand-md对应的媒体查询，看min-width值是不是你预期的 - 不要只改 JS 配置或 HTML 类名，断点逻辑藏在 CSS 媒体查询里，CSS 错了，JS 再对也白搭
父容器样式可能意外禁用折叠动画或裁剪内容
即使断点和 JS 都对，.navbar-collapse 展开后也可能被看不见的样式吞掉：
-
overflow: hidden在.navbar或其父元素上 → 展开的菜单被直接裁剪，看起来像“没反应” -
transform（如scale(0.99)）在祖先节点 → 触发新层叠上下文，导致.dropdown-backdrop或.navbar-collapse定位异常 -
position: relative+z-index过低 → 被其他组件（如轮播图、弹窗）盖住，点不中
最易被忽略的是：断点类本身不触发任何 JS，它只是开关 CSS 媒体查询。一旦你发现点击汉堡图标后 .navbar-collapse 上的 show 类被加上了，但内容不可见——问题一定出在 CSS 渲染层，不是 JS 绑定失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
