Bootstrap 5 的 .navbar-collapse 折叠高度为 0 是正常设计；问题通常源于 JS 初始化失败（未引入 bootstrap.bundle.min.js）、data-bs-target 指向错误（须用 #id 而非 .class）或自定义 CSS 干扰 max-height/overflow 动画。
Bootstrap 5 的 .navbar-collapse 在折叠状态下高度为 0，不是 bug，是设计行为；但如果你看到导航项“闪一下就消失”或点击按钮无响应，大概率是 JavaScript 初始化失败或 CSS 被意外覆盖。
检查 navbar-collapse 是否被 JS 正确控制
Bootstrap 5 依赖 bootstrap.bundle.min.js（含 Popper）来处理折叠逻辑。如果只引入了 bootstrap.min.css 或未加载 JS，data-bs-toggle="collapse" 就完全失效，DOM 上的 show 类不会切换，height 始终为 0。
- 确认 HTML 中
<script>标签在页面底部或使用defer，且路径正确：bootstrap.bundle.min.js（不是bootstrap.min.js） - 检查浏览器控制台是否有
ReferenceError: bootstrap is not defined或TypeError: Cannot read property 'Collapse' of undefined - 手动测试：在控制台执行
bootstrap.Collapse.getInstance(document.querySelector('.navbar-collapse'))，返回实例说明 JS 已加载并识别元素
避免对 .navbar-collapse 直接设置 height 或 overflow
Bootstrap 5 使用 max-height + transition 实现渐变展开，若你或第三方样式强行设 height: auto、overflow: hidden 或 display: block/none，会破坏其 CSS 动画流，导致“塌陷后无法恢复”或“展开时高度跳变”。
- 禁用所有自定义 CSS 中针对
.navbar-collapse的height、max-height、overflow声明 - 不要用
!important强行覆盖.navbar-collapse.collapse.show的max-height—— Bootstrap 用内联style动态设置该值，硬覆盖会导致过渡失效 - 若需微调动画速度，改用
--bs-navbar-collapse-transitionCSS 变量（如:root { --bs-navbar-collapse-transition: height 0.3s ease-in-out; }），而非重写规则
确认折叠触发器（button）的 data-bs-target 指向正确
常见错误是 data-bs-target 值与 .navbar-collapse 的 id 不匹配，或用了 class 选择器（Bootstrap 5 仅支持 #id）。
立即学习“前端免费学习笔记（深入）”；
- 触发按钮必须写成
data-bs-target="#myNavbar"（注意井号），对应<div class="navbar-collapse collapse" id="myNavbar"> - 不要写成
data-bs-target=".navbar-collapse"—— 这在 Bootstrap 5 中无效，JS 会静默失败，无报错但无响应 - 多个导航栏共存时，确保每个
id唯一，且data-bs-target严格匹配
真正卡住的地方往往不是 CSS 高度本身，而是 JS 没接管、target 错位、或某条自定义样式偷偷把 max-height 锁死了。调试时先关掉所有自定义 CSS，只留 Bootstrap 官方资源跑通基础折叠，再逐条加回样式定位冲突点。
