直接改 .navbar-collapse 的 css 常常无效，因为 bootstrap 折叠逻辑依赖 js 动态增删 .show 类来控制显示/隐藏及动画、键盘支持和 aria 属性，硬覆盖 css 会破坏这些行为；真正开关是 navbar-expand-* 预设类。
为什么直接改 .navbar-collapse 的 CSS 常常无效
很多人想用纯 CSS 覆盖 .navbar-collapse 的展开行为，比如加 display: block !important 或改 height，结果发现小屏下菜单还是不显示，或者动画卡住。根本原因是：Bootstrap 的折叠逻辑依赖 JavaScript 控制 .show 类的增删，而原生 CSS 规则（如 .navbar-collapse:not(.show)）优先级更高，硬覆盖会破坏过渡动画、键盘支持（Enter/Space）、aria-expanded 属性同步等关键行为。
navbar-expand-* 断点类才是真正的控制开关
响应式展开/折叠不是靠媒体查询手动写，而是由 navbar-expand-sm、navbar-expand-md 这类预设类驱动的。它们内部已绑定断点和 display 状态切换逻辑：
-
navbar-expand-sm：≥576px 时展开， -
navbar-expand-md：≥768px 时展开， -
navbar-expand-lg：≥992px 时展开，
漏掉这个类，.navbar-toggler 按钮即使存在也不会触发任何折叠逻辑——它只是个按钮，没“开关”它就不起作用。
自定义展开样式必须配合 .show 类和过渡属性
如果真要重写展开效果（比如改高度、背景、阴影），只改 .navbar-collapse 不够，得同时处理三个状态：
- 折叠态：
.navbar-collapse:not(.show)→ 确保height: 0、overflow: hidden - 展开态：
.navbar-collapse.show→ 显式设height: auto或用max-height控制动画范围 - 过渡态：
.navbar-collapse.collapse→ 必须保留transition: height .3s ease，否则 JS 切换无动画
示例（适配 Bootstrap 5.2+）：
.navbar-collapse {
transition: height .3s ease;
}
.navbar-collapse:not(.show) {
height: 0;
overflow: hidden;
}
.navbar-collapse.show {
height: auto;
max-height: 400px; /* 防止超长菜单撑爆视口 */
}
容易被忽略的 JS 初始化和 DOM 时机
即使 HTML 结构和 CSS 都对了，动态插入的导航栏或在 DOMContentLoaded 之前操作，也会导致折叠失效。关键点：
- 确保
<script src="bootstrap.bundle.min.js"></script>已加载（含 Popper 和 Collapse 插件） - 不要在 DOM 尚未就绪时调用
new bootstrap.Collapse() - 目标元素必须是带
class="collapse"的<div>，不是 <code><nav></nav>或<button></button> - 如果用
data-bs-toggle="collapse"，对应data-bs-target的 ID 必须与.collapse容器的id完全一致
真正起效的不是你写了多少 CSS，而是这三者是否严丝合缝：断点类 + data-bs 属性 + Collapse 插件初始化。任一环节错位，都会让“重写样式”变成无源之水。
