.navbar-collapse.show 截断内容的根源是 max-height 过渡值不足，Bootstrap 用固定估算值而非真实高度，导致多行文字、下拉菜单等超限被 overflow: hidden 裁剪；应设为 120vh 等足够大且可动画的固定值，并修复 dropdown 定位与盒模型干扰。
为什么 .navbar-collapse.show 会截断内容
根本不是 JS 没触发，而是 .navbar-collapse.show 的 max-height 过渡值不够大。Bootstrap 用固定估算值（比如 300px 或 1000px）做动画，不计算真实内容高度。一旦导航项含多行文字、图标、.dropdown、大 padding，或图标字体加载延迟，实际高度就超了——内容直接被 overflow: hidden 切掉。
常见现象：.navbar-collapse.show 展开后只显示前两三个链接，底部空白，滚动条不出现；DevTools 里能看到内容 DOM 存在，但被“裁掉”了。
- 检查是否手动给
.navbar-collapse加了height或max-height（尤其在@media里），删掉它们 - 确认子元素（如
.nav-link、.dropdown-menu）没意外设置overflow: hidden或position: absolute - 临时加
transition: none禁用动画，看是否还截断——若不截了，基本就是max-height不够
怎么安全增大 .navbar-collapse.show 的 max-height
max-height 不能设为 none（动画失效），也不能用 100% 或 fit-content（CSS transition 不支持这些关键字作为过渡终点）。必须用足够大、可动画的固定值。
- 通用稳妥写法：
.navbar-collapse.show { max-height: 120vh !important; }——vh单位能自适应屏幕，120%确保覆盖绝大多数内容，又不会无限拉高 - 精简菜单（≤5 个
.nav-link）：可精确估算，每项约48px（含padding+line-height），加20–40px余量，写成max-height: 240px更轻量 - 确保这条规则放在自定义 CSS 文件末尾，或使用足够高的选择器权重（如
.navbar.navbar-expand-lg .navbar-collapse.show），避免被 Bootstrap 原生样式覆盖
下拉菜单（.dropdown）导致的高度错位怎么处理
.dropdown-menu 默认是 position: absolute，不占 .navbar-collapse 高度，但它父级（如 .nav-item）若有 min-height 或大 padding，视觉上会“变高”，却没被 max-height 包含——点开后菜单向上溢出、被切半，或整个折叠区突然撑高又错位。
- 给
.navbar-collapse.show .dropdown-menu加position: static !important;，让它随文档流撑高容器 - 或者改用
data-bs-popper="static"属性禁用 Popper.js 定位： - 排查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }——移动端折叠态不需要这个 -
.navbar-collapse默认没有position: relative，导致absolute子元素参考 viewport 定位，被 fixed 导航栏压住——补上position: relative可修复定位上下文
动画卡顿或跳变的隐藏原因
根本原因不是 transition 时间太短，而是 max-height 动画被盒模型干扰：如果 .navbar-collapse 有 border、大 padding，或子元素用了 position: absolute 脱离文档流，浏览器就无法平滑插值高度变化，导致内容“突然弹出”或中途卡住。
- 删掉所有手动加的
.navbar-collapse { padding: 1rem; border: 1px solid #dee2e6; }——这些属性不参与max-height过渡，但会挤占可用空间 - 确保
.nav-link和.dropdown-menu没设overflow: hidden，否则内部内容撑高时被裁剪，动画终点高度计算错误 - 若用了自定义图标字体，首次展开可能因字体加载延迟导致高度估算偏小；可临时加
transition: none排查，确认后用font-display: swap优化字体加载
真正难调的不是数值本身，而是多个样式层叠后对渲染上下文的隐式干扰——尤其是 position: absolute、flex 布局和 box-sizing 混用时，浏览器很难稳定地插值 max-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
