.navbar-collapse.show 内容被截断是因为 max-height 估算值不足且不能设为 none 或 fit-content；应设为 120vh 或 240px 等足够大但可动画的固定值，并排查子元素 overflow、定位及图标字体加载问题。
导航栏移动端展开后内容被截断，不是 JS 错了，是 max-height 过渡值不够大，且不能设为 none 或 fit-content——否则动画失效。
为什么 .navbar-collapse.show 会截断内容
Bootstrap 用 max-height: 0 + overflow: hidden 控制收起状态，展开时靠 .show 类切换 max-height。但它不计算真实高度，而是硬编码一个估算值（如 1000px）。一旦子项含多行文字、大 padding、.dropdown-menu 或图标字体加载延迟，就会撑出边界被裁掉。
- 检查是否手动加了
.navbar-collapse { height: 60px }或max-height: 200px—— 删掉，它们会覆盖过渡逻辑 - 确认子元素没意外设置
overflow: hidden或position: absolute，否则脱离文档流，高度无法被父级感知 - 若用了自定义图标字体，首次展开可能因字体未就绪导致高度计算偏小；可临时加
transition: none排查
怎么安全增大 max-height 过渡值
目标是“足够大但不破坏动画”，不能写 max-height: none（无过渡）、也不能写 100%（不触发 transition）。
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }——vh相对视口，兼顾大屏和小屏，!important确保压过 Bootstrap 默认值 - 精简场景（仅 3–5 个链接）：
.navbar-collapse.show { max-height: 240px; }—— 每项按 48px 高度 + 余量，更轻量，避免大数值触发低端机重排卡顿 - 别用
fit-content或max-content：CSS transition 不支持这些关键字作为过渡起点/终点
下拉菜单（.dropdown）导致的额外撑高问题
折叠区里嵌 .dropdown 时，.dropdown-menu 默认 position: absolute，不占 .navbar-collapse 高度，但它的父容器（如 .nav-item）若有 min-height 或大 padding，视觉上会“变高”却没被 max-height 涵盖。
- 给
.nav-item去掉min-height，改用padding-block控制间距，更可控 - 若必须保留下拉菜单定位，可在
.navbar-collapse.show上加padding-bottom: 1rem预留空间，而非依赖自动撑开 - 避免在
.dropdown-menu外层套.d-flex或flex-fill—— 它们会干扰max-height的渲染上下文
动画卡顿或跳变的隐藏原因
不是 transition 时间设短了，而是盒模型干扰了 max-height 的平滑过渡。
- 确保
.navbar-collapse没设border或大padding—— 它们不参与max-height动画，但会挤占可用空间，导致内容“突然弹出” - 如果用了
box-sizing: border-box全局重置，要确认.navbar-collapse没被其他规则覆盖回content-box - 极端情况（如动态加载子菜单），JS 设置完内容后，手动触发一次
getComputedStyle强制重排：getComputedStyle(el).height，再加.show类
真正麻烦的不是设多大 max-height，而是当内容高度本身就不稳定（比如文字换行随屏幕宽度变化、图标加载异步）时，固定值总会漏一两种边缘 case。这时候得考虑 JS 动态读取 scrollHeight 再赋值——但别在每次 show 时都算，缓存一次，只在 DOM 变化后更新。
