为何直接修改 .na vbar-collapse 的 CSS 常常无效？
不少人尝试使用 `display: block !important` 或直接修改 `height` 来强制展开折叠菜单，结果在小屏幕下依然无法正常显示。根本原因在于：Bootstrap的折叠行为依赖于JavaScript动态控制`.show`类。原生CSS规则（如 `.na vbar-collapse:not(.show)`）的优先级更高，强行覆盖会导致过渡动画失效、键盘操作（回车/空格）失灵，以及 `aria-expanded` 无障碍状态无法同步。
na vbar-expand-* 断点类才是真正的控制开关
这里有一个关键点：响应式的展开与折叠并非依靠手写媒体查询来控制，真正的幕后推手是 `na vbar-expand-sm`、`na vbar-expand-md` 等预设类。这些类内部已经帮你绑定了断点和 display 状态的切换逻辑：
* `na vbar-expand-sm`：当屏幕宽度 ≥576px 时自动展开。
* `na vbar-expand-md`：当屏幕宽度 ≥768px 时自动展开。
* `na vbar-expand-lg`：当屏幕宽度 ≥992px 时自动展开。
如果漏掉了这个类，你的 `.na vbar-toggler` 按钮将形同虚设，点击它不会触发任何折叠行为。它只是一个按钮，缺少“开关”功能，自然无法生效。
自定义展开样式必须配合 .show 类与过渡属性
如果想真正实现自定义的展开效果，例如修改展开时的高度、背景或阴影，仅修改 `.na vbar-collapse` 是远远不够的。你需要同时考虑其三种状态：
* **折叠态**：`.na vbar-collapse:not(.show)`，需设置 `height: 0` 和 `overflow: hidden`，将内容隐藏。
* **展开态**：`.na vbar-collapse.show`，显式设置 `height: auto`，或使用 `max-height` 控制动画范围，避免内容过多撑爆视口。
* **过渡态**：`.na vbar-collapse.collapse`，这是关键。务必保留 `transition: height .3s ease`，否则当JS触发切换时，动画效果会缺失，菜单会“生硬”地弹出。
以适配Bootstrap 5.2+为例，你可以这样编写：
```css
.na vbar-collapse {
transition: height .3s ease;
}
.na vbar-collapse:not(.show) {
height: 0;
overflow: hidden;
}
.na vbar-collapse.show {
height: auto;
max-height: 400px; /* 防止超长菜单撑爆视口 */
}
```
容易被忽略的 JS 初始化与 DOM 时机
即使HTML结构和CSS都正确，仍有一个容易踩入的坑：动态插入的导航栏，或在 `DOMContentLoaded` 事件之前就进行操作，都会导致折叠功能失效。以下是几个必须注意的关键点： * 确保 `` 已加载，该文件包含Popper和Collapse插件。 * 不要在DOM尚未准备好时调用 `new bootstrap.Collapse()`，否则会报错。 * 操作的目标元素必须是带有 `class="collapse"` 的 ``，而不是 `
