最常见原因是.navbar-collapse在小屏下display: none被高优先级CSS强制覆盖为block或flex；需用开发者工具Computed面板确认最终display值，检查全局重置、选择器权重、完整CSS引入、断点匹配及data-bs-target与id是否严格一致。
检查 .navbar-collapse 的 display 规则是否被覆盖
折叠失效最常见原因是 .navbar-collapse 在小屏下本该是 display: none，却被更高优先级的 CSS 强制设为 display: block 或 flex。浏览器开发者工具里选中该元素，在「Computed」面板看最终生效的 display 值；若不是 none，就说明响应式规则没赢过其他样式。
- 搜索项目中是否有全局重置，比如
.collapse { display: block !important; }—— 这类声明会直接废掉 Bootstrap 的折叠逻辑 - 检查自定义样式里是否用了更具体的选择器，例如
.nav-wrapper .navbar-collapse，它的权重高于默认的.navbar-collapse - 确认你引入的是完整版
bootstrap.min.css，某些构建工具或 CDN 精简包会剔除@media内的折叠规则
验证 navbar-expand-* 类是否匹配当前断点
navbar-expand-md 意味着「≥768px 才展开」，也就是在 767px 及以下才折叠；如果实际视口宽度是 780px（比如 iPad 横屏），而你写了 navbar-expand-md，菜单就不会折叠——这不是 CSS 优先级问题，而是断点没对上。
- 用浏览器设备模拟器调到具体像素（如 767px、575px），别只依赖「iPhone X」这类预设，它们的 viewport 宽度可能因缩放不准确
- 检查是否改过 Sass 变量
$grid-breakpoints却没重新编译 CSS，导致navbar-expand-md实际对应的是 820px 而非 768px - 别用
navbar-expand（无后缀）：它等价于navbar-expand-lg，但部分构建流程会把它当无效类过滤掉
排查父容器 overflow 或 transform 创建的新层叠上下文
即使 .navbar-collapse 正确设了 display: none，如果它被包在一个 overflow: hidden 或 transform: translateZ(0) 的父容器里，折叠后的渲染可能被裁剪或定位错乱，看起来像「点了没反应」。
- 临时给父容器加
outline: 1px solid red，看展开时菜单内容是否被截断在父边界内 - 检查轮播图、卡片、header 等常见组件是否意外设置了
overflow: hidden - 避免在
body或html上设height: 100% + overflow: hidden，移动端键盘弹出会触发重排，让position: fixed的菜单失位
确认 data-bs-target 和目标 id 是否严格一致
Bootstrap 的 JS 折叠逻辑靠 data-bs-target 找到目标元素，哪怕一个连字符、大小写或空格不一致，querySelector 就查不到，JS 不执行，CSS 里的 .collapse 类也就不会被切换——此时你看到的「点击无效」，其实是 JS 根本没动，纯属属性配对失败。
立即学习“前端免费学习笔记（深入）”；
-
data-bs-target必须以#开头，且与目标<div id="nav-menu">的id完全相同（包括大小写） - 不要混用旧写法：
data-toggle、data-target、data-mdb-toggle在 Bootstrap 5 中全部无效 - 确保
bootstrap.bundle.min.js已加载，且脚本放在</body>前；DOM 未就绪时绑定事件会静默失败
真正卡住的地方往往不在「怎么写」，而在「谁赢了」——CSS 优先级、断点计算、JS 查找逻辑，三者只要一个没对齐，折叠就停在半路。
