导航栏小屏不折叠的三大主因是：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"> 的 <code>id完全一致（大小写、连字符、空格都不能差） - 如果目标元素是
<div id="nav-main">，<code>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
推荐做法：把
<script></script>放在前，只用bootstrap.bundle.min.js，删掉单独的 Popper 引入。折叠菜单展开后位置错乱，大概率是 CSS 定位干扰
当
.navbar-collapse展开时，它默认是position: static，靠文档流撑开父容器。但如果给.navbar加了position: absolute或position: fixed，又没处理好z-index和高度，就会出现菜单“飞走”、被遮挡、或下面内容不往下移的问题。调试建议：
- 在浏览器开发者工具里临时删掉
position: absolute，看是否恢复正常 - 检查
.navbar-collapse是否被设了display: none !important（某些重置 CSS 或插件会干这事） - 用
getComputedStyle()查看展开后元素的display和height，确认不是被其他样式强制压成0
最隐蔽的坑：某些 UI 框架或自定义动画库会劫持
transition或覆盖.collapsing类的 height 行为，导致折叠过程卡在半途。这时候得关掉其他 JS，逐个排查。 - 只引入了
