Bootstrap 导航栏(Navbar)移动端不折叠实现-Bootstrap教程-PHP中文网

Bootstrap 5 navbar默认不折叠是因为移除了自动响应式行为，必须显式添加navbar-expand-*类（如navbar-expand-md）才能在指定断点下展开，否则始终横排显示；漏写该类是移动端无汉堡菜单的主因。

为什么 Bootstrap 5 的 navbar 默认在移动端不折叠？

因为 bootstrap 5 移除了 navbar-expand 的默认行为：没有显式指定响应式断点类（如 navbar-expand-md）时，navbar 会始终展开——也就是「移动端也不折叠」。这不是 bug，是设计变更。如果你看到 navbar 在手机上还是横排、没汉堡菜单，大概率是漏写了这个类。

如何强制 navbar 在移动端保持展开（不折叠）？

直接移除或避免添加任何 navbar-expand-* 类即可。但更稳妥的做法是显式声明 navbar-expand（无后缀），它表示「所有断点都展开」：

<nav class="navbar navbar-expand navbar-light bg-light"><div class="container-fluid">
    <a class="navbar-brand" href="#">Site</a>
    <div class="navbar-nav">
      <a class="nav-link" href="#">Home</a>
      <a class="nav-link" href="#">About</a>
    </div>
  </div>
</nav>

navbar-expand（无后缀）= 所有屏幕宽度下都不折叠，会被隐藏，且不会响应点击
若用了 navbar-expand-sm 或更高（如 md），则对应断点及以上才展开；小于此断点就会折叠并显示汉堡按钮
Bootstrap 5 不再支持 navbar-toggleable-*（这是 v4 的写法，v5 已废弃）

如果加了 `navbar-expand` 却仍出现折叠，检查什么？

常见干扰项不是类名本身，而是结构或 JS 行为：

确认没意外引入 Bootstrap 4 的 CSS/JS（混用会导致 navbar-toggler 逻辑错乱）
检查是否手动调用了 bootstrap.Collapse 或绑定了错误的 data-bs-target，导致折叠逻辑被触发
navbar-nav 必须是 navbar 的直接子元素或嵌套在 container 内；若放在自定义 div 里且该 div 有 flex-wrap: wrap，可能视觉上“折行”，但这不是 Bootstrap 折叠，而是 CSS 布局溢出
用浏览器开发者工具检查 .navbar-collapse 元素是否存在——如果存在且没被移除或隐藏，说明你其实启用了折叠逻辑（比如误加了 navbar-expand-md 却又删了 navbar-toggler）

想让 navbar 在移动端不折叠，但又保留部分响应式行为？

纯 CSS 控制更灵活，比如只禁用折叠触发而不影响其他响应式样式：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

@media (max-width: 991.98px) {
  .navbar-nav {
    flex-direction: row;
  }
  .navbar-toggler {
    display: none;
  }
  .navbar-collapse {
    display: block !important;
  }
}

注意：这种写法绕过了 Bootstrap 的 JS 控制，所以不需要 data-bs-toggle="collapse"，也不会监听窗口 resize 重算；适合确定不需要折叠的简单场景。但若项目中其他组件依赖 navbar-collapse 的 JS 实例（比如动态插入菜单），就别硬覆盖 display。

最易被忽略的是：Bootstrap 5 的 navbar 结构依赖正确的 class 层级和 JS 初始化时机。哪怕只改一个 class，如果 JS 已执行过，可能需要手动销毁重建实例，否则状态残留。