bootstrap 5 导航栏默认不折叠，因移除了自动响应式行为；必须显式添加 navbar-expand-* 类（如 navbar-expand-md）才启用折叠逻辑，漏写即始终横排、无汉堡菜单。
Bootstrap 5 的导航栏默认就不折叠，所谓“不折叠”往往不是故障，而是你没加 navbar-expand-* 类——它才是折叠功能的开关，不是用来“防止折叠”的。
为什么删掉 navbar-expand-* 就能解决“不折叠”问题
Bootstrap 5 移除了 v4 的自动响应式行为。没写任何 navbar-expand-* 类时，.navbar 在所有屏幕尺寸下都保持展开状态，.navbar-toggler 根本不会渲染，JS 也不绑定事件，自然就不会折叠。
-
navbar-expand-md表示「≥768px 展开」，小屏（如手机竖屏）就会折叠；漏写这个类，小屏就横排到底 -
navbar-expand（无后缀）是无效写法，等价于navbar-expand-lg，反而会让部分平板也折叠 - 如果结构里还留着
<button class="navbar-toggler"></button>，但没 JS 初始化，它会变成不可点击的静态元素，建议一并删掉 - 真要禁用折叠，最干净的做法是：删掉所有
navbar-expand-*类 + 移除.navbar-collapse容器 + 把.nav-item直接放在.navbar下
data-bs-target 和 id 不匹配导致看似“不折叠”
即使写了 navbar-expand-md，如果 data-bs-target 指向的 ID 和目标 <div> 的 <code>id 不一致（比如大小写、空格、连字符错位），点击汉堡按钮后 .navbar-collapse 不会添加 show 类，菜单看起来“没反应”，其实是绑定失败。
- 检查浏览器开发者工具中，点击按钮后
.navbar-collapse元素是否获得show类 - 确认
data-bs-target="#navbarSupportedContent"中的 ID 与<div id="navbarSupportedContent"> 完全一致（包括开头的 <code>#） - 避免用
href="#..."替代data-bs-target，v5 已不支持 - 必须使用
bootstrap.bundle.min.js（含 Popper），不能只用bootstrap.min.js -
<script></script>标签要放在前，而不是内 - 控制台出现
Uncaught ReferenceError: bootstrap is not defined或Cannot read properties of undefined (reading 'Collapse')就说明 JS 加载失败 - 检查最终 HTML 源码，确认
.navbar-collapse元素确实有class="collapse navbar-collapse"——某些构建工具或 HTML minifier 会误删collapse类 - 用开发者工具检查小屏下
.navbar-collapse的display值，如果不是none，说明媒体查询没命中或被覆盖 - 确认你加载的是完整
bootstrap.min.css，不是精简版或只引了部分组件 - 如果你改过 Sass 变量
$grid-breakpoints（比如把md改成820px），必须重新编译 CSS，否则 HTML 写navbar-expand-md仍按原始768px判断 - 避免在父容器上设
overflow: hidden或transform，可能让展开后的菜单被裁剪，造成“看不见”假象
JS 没加载或加载时机错，折叠功能直接静默失效
折叠是纯 JavaScript 行为，只引入 CSS 是不够的。最常见错误是把 bootstrap.bundle.min.js 放在 里，DOM 还没生成，JS 就执行完了，data-bs-toggle="collapse" 绑定失败。
CSS 媒体查询被覆盖或断点错位
即使结构和 JS 都对，.navbar-collapse 在小屏下仍显示为 display: block（该是 display: none 才对），说明响应式规则没生效。这通常是因为自定义样式或断点配置不一致。
最容易被忽略的，是以为删了 navbar-expand-* 就万事大吉，结果 HTML 里还残留着 data-bs-target 和 .navbar-collapse 结构——这些 DOM 节点没被 JS 初始化，却占着位置，排查时容易误判为“JS 没生效”。真要禁用折叠，结构也要同步精简。
