小屏导航栏不折叠解决方法解析

Bootstrap导航栏在小屏下不折叠，往往并非代码逻辑复杂所致，而是几个看似微小却致命的细节出了问题：用错了navbar-expand-断点类（如误配xl导致需缩至1200px才折叠）、data-bs-toggle或data-bs-target属性拼写偏差（哪怕大小写或#号缺失都会让JS插件彻底失灵）、或更隐蔽地——JS根本没加载成功（比如漏引bootstrap.bundle.min.js、脚本位置不当、或重复引入Popper引发冲突）；此外，CSS定位干扰（如navbar设为fixed后菜单“飞走”）、样式覆盖（display: none !important）、甚至第三方动画库劫持过渡行为，也都可能让折叠功能静默失效——排查时只需三步：核对断点与设备实际宽度是否匹配、严格校验data属性与ID的一致性、确保JS在DOM就绪后正确加载执行。

导航栏小屏不折叠，先看 navbar-expand- 类有没有写对

Bootstrap 5 的折叠行为完全由 navbar-expand- 后缀类控制，它不是“自动检测屏幕尺寸”，而是依赖 CSS 媒体查询断点。如果写了 navbar-expand-lg，那只有视口宽度 小于 992px（即 lg 断点）时才会触发折叠；若误用 navbar-expand-xl，就得缩到 1200px 以下才折叠——用户拿手机看却没反应，往往就是这个原因。

常见错误包括：

• 复制了旧项目代码，沿用 navbar-expand-sm 却没意识到它在 576px 才折叠，而现代手机横屏常超这个值
• 混用了自定义断点，但没同步更新 Bootstrap 的 SCSS 变量或未重新编译 CSS
• 在父容器上加了 overflow: hidden 或 transform，意外裁剪了展开后的 .navbar-collapse 区域

data-bs-toggle 和 data-bs-target 拼错一个字符就失效

Bootstrap 5 彻底弃用 data-toggle 和 data-target，也**不认** data-mdb-toggle（那是 MDBootstrap 的）。浏览器遇到不认识的 data- 属性直接忽略，JS 插件根本不会绑定事件。

必须严格匹配：

• data-bs-toggle 的值只能是 "collapse"（注意引号是 HTML 属性值，不是 JS 字符串）
• data-bs-target 的值必须以 # 开头，且与目标
  的 id 完全一致（大小写、连字符、空格都不能差）
• 如果目标元素是
  ，data-bs-target 就得写 "#nav-main"，写成 "#navMain" 或 "nav-main" 都会失败

JS 文件没加载或顺序错了，data-bs-* 再标准也没用

所有 data-bs-* 属性只是“指令”，真正干活的是 Bootstrap 的 JS。如果 JS 没执行，这些属性就是纯文本。

最容易被忽略的三点：

• 只引入了 bootstrap.min.css，漏掉 bootstrap.min.js 或 bootstrap.bundle.min.js
• 脚本放在 里，但 DOM 还没解析完，document.querySelectorAll('[data-bs-toggle="collapse"]') 查不到元素
• 同时引入了 popper.min.js 和 bootstrap.bundle.min.js —— 后者已内置 Popper，重复引入会导致 Uncaught TypeError: Popper is not a constructor

推荐做法：把