<p>Bootstrap 5 默认不折叠导航条，删掉 navbar-expand-* 类即可；若已添加则应移除而非用JS干预，同时建议删除 navbar-toggler 按钮和 navbar-collapse 容器以确保彻底禁用折叠功能。</p>
bootstrap 5 默认就不折叠导航条，除非你显式加了 navbar-expand-* 类——所以“不让它折叠”，其实多数时候是删掉这个类，而不是加什么特殊配置。
不写 navbar-expand-* 类是最直接的办法
Bootstrap 5 移除了 v4 的自动响应式行为。没加任何 navbar-expand-* 类时，导航条在所有断点下都保持展开状态，.navbar-toggler 按钮根本不会渲染，JS 也不绑定事件，自然就不会折叠。
- ✅ 正确写法：
<nav class="navbar navbar-light bg-light">（不含任何navbar-expand-*） - ❌ 错误写法：
navbar-expand（无后缀）——它等价于navbar-expand-lg，反而会让小屏折叠 - ⚠️ 注意：如果结构里还留着
<button class="navbar-toggler">，它会因缺少 JS 绑定而变成不可点击的静态元素，建议一并删掉
用了 navbar-expand-* 却还想强制不折叠？别靠 JS hack
如果你已加了 navbar-expand-md 这类类名，但又希望移动端也展开，不要试图用 document.querySelector('.navbar-collapse').classList.remove('show') 或手动调 bootstrap.Collapse.getInstance(...).hide()。这些操作会破坏 aria-expanded、过渡动画和内部状态同步，后续点击-toggler 可能完全失灵。
- ✅ 推荐做法：删掉
navbar-expand-*类，回归默认行为 - ⚠️ 替代方案（仅限必须保留类名的场景）：用 CSS 强制覆盖响应式规则：
@media (max-width: 767.98px) { .navbar-collapse { display: block !important; } }，但要确认没其他地方用!important冲突 - ? 避免在父容器上设
overflow: hidden或transform，可能让展开后的菜单被裁剪，造成“看不见”假象
检查是否被自定义样式或构建工具悄悄改了
有些项目用 Sass 自定义了 $grid-breakpoints，但没重新编译 Bootstrap CSS；或者用了 Webpack/Vite 插件（如 HTML minifier），把 collapse 类名当冗余删掉了——结果是 .navbar-collapse 元素存在，但没了 collapse 这个关键类，JS 就找不到目标。
- 打开浏览器开发者工具，检查最终渲染的 HTML 中：
<div class="navbar-collapse collapse">是否完整存在 - 搜索项目中是否有全局重置：
.collapse { display: block !important; }—— 这会让折叠逻辑从 CSS 层面失效 - 确认加载的是完整
bootstrap.min.css，不是只引了navbar.css等碎片文件
最常被忽略的一点：你以为删了 navbar-expand-* 就万事大吉，但实际 HTML 里还残留着 data-bs-target 和 .navbar-collapse 结构。这些没被 JS 初始化，却占着 DOM，容易误导排查方向。真要彻底禁用折叠，结构也要精简——去掉 .navbar-collapse 容器，把导航项直接放在 .navbar 下即可。
