Bootstrap导航栏为什么在小屏不自动折叠_检查CSS响应式断点与JS加载顺序

作者：袖梨 2026-06-16

导航栏小屏不折叠的三大主因是：navbar-expand-断点类误用、data-bs-toggle/target属性拼写错误、Bootstrap JS未正确加载；需核对断点值、严格匹配属性名与ID、确保bootstrap.bundle.min.js在闭合body前加载。

导航栏小屏不折叠，先看 `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 的值必须以 # 开头，且与目标 <div class="navbar-collapse"> 的 id 完全一致（大小写、连字符、空格都不能差）
如果目标元素是 <div id="nav-main">，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
脚本放在 <head> 里，但 DOM 还没解析完，document.querySelectorAll('[data-bs-toggle="collapse"]') 查不到元素
同时引入了 popper.min.js 和 bootstrap.bundle.min.js —— 后者已内置 Popper，重复引入会导致 Uncaught TypeError: Popper is not a constructor

推荐做法：把 <script> 放在 </body> 前，只用 bootstrap.bundle.min.js，删掉单独的 Popper 引入。

折叠菜单展开后位置错乱，大概率是 CSS 定位干扰

当 .navbar-collapse 展开时，它默认是 position: static，靠文档流撑开父容器。但如果给 .navbar 加了 position: absolute 或 position: fixed，又没处理好 z-index 和高度，就会出现菜单“飞走”、被遮挡、或下面内容不往下移的问题。

调试建议：