下拉菜单展开“卡住”是因max-height过渡值不足且position: absolute导致高度估算失真，被overflow: hidden截断；应设max-height: 120vh!important并同步调整transition，禁用干扰样式与动态定位。
根本不是动画太慢或太快的问题，而是下拉菜单的 max-height 过渡值不够大，加上 .dropdown-menu 的 position: absolute 导致浏览器无法准确估算高度，动画中途被 overflow: hidden 截断。
为什么下拉菜单展开时“卡住”或只显示前两行
常见现象：点击 .navbar-toggler 后，.navbar-collapse 展开，但里面嵌套的 .dropdown 一展开，内容就突然被切掉、底部空白、滚动条不出现。DevTools 里能看到 DOM 元素完整存在，只是“看不见”。
- 直接原因：
.navbar-collapse.show的max-height终点值（比如默认的300px）远小于实际撑开后的高度——尤其当有多个.dropdown-menu、大padding、图标字体延迟加载时 -
max-height: none不参与 CSS transition，会导致动画立即跳变，不是“慢”，是“失效” -
.dropdown-menu默认position: absolute，不占父容器高度，但它的父级（如.nav-item）若有min-height或padding-block，视觉上撑高了，却没被max-height涵盖
怎么安全改 max-height 和 transition
必须同步调整两个属性，且规则要带 !important 并放在 Bootstrap CSS 之后：
- 通用写法（推荐）：
.navbar-collapse.show { max-height: 120vh !important; transition: max-height 0.6s ease-in-out !important; } - 精简菜单（≤5 个
.nav-link）可更轻量：max-height: 240px（按每项 48px + 余量估算） - 别在
@media里覆盖——Bootstrap 5.3+ 的过渡逻辑已绑定到 CSS 变量--bs-navbar-collapse-transition，直接覆盖类最可靠 - 禁用所有手动加的
.navbar-collapse { padding: 1rem; border: 1px solid #dee2e6; }，这些会挤占可用空间却不参与过渡
怎么处理 .dropdown 嵌套导致的高度错位
点开二级菜单后整个折叠区“突然撑高”或“向上溢出”，本质是定位脱离文档流引发的高度估算失真：
- 临时方案：给
.dropdown-menu加position: static !important，让它随文档流撑高容器 - 更可控方式：在移动端加
data-bs-popper="static"属性，禁用 Popper.js 动态定位： - 清理干扰样式：删掉
.nav-item的min-height，改用padding-block: 0.5rem控制间距；避免在外层套d-flex或flex-fill - 检查是否误写了
@media (max-width: 991.98px) { .dropdown-menu { top: 100% } }——折叠态下这个声明毫无意义，反而干扰渲染
容易被忽略的细节
很多人调完 max-height 就以为结束了，但真机上还有三个隐形雷：
-
font-display: swap必须加在自定义图标字体上，否则首次展开时字体加载延迟 → 高度估算偏小 → 卡顿 -
will-change: transform别提前加在.navbar-collapse上，它不是开关，是“预告信”；应在touchstart时加.is-animating类，动画结束立刻清除 - 移动端点击无反馈？不是动画问题，是 iOS Safari 的 300ms 延迟和
:active失效——得加touch-action: manipulation或用fastclick补齐
