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（无后缀）= 所有屏幕宽度下都不折叠，<button class="navbar-toggler"></button>会被隐藏，且不会响应点击 - 若用了
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 控制更灵活，比如只禁用折叠触发而不影响其他响应式样式：
@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 已执行过，可能需要手动销毁重建实例，否则状态残留。
