折叠菜单展开后内容被截断的根源是Bootstrap用固定max-height值实现过渡动画，而非动态适配内容高度；应改用120vh等自适应值，并修复下拉菜单定位问题。
折叠菜单展开后内容被截断，.navbar-collapse.show 的 max-height 不够
bootstrap 用固定值（比如 300px 或 1000px）做 .navbar-collapse.show 的 max-height 过渡，不是根据真实内容高度动态计算的。一旦导航项文字换行、带图标、含下拉菜单或用了大 padding，就很容易溢出被 overflow: hidden 切掉。
这不是 JS 没加载或 class 没加对，而是 CSS 动画逻辑本身的设计限制。
- 检查 DevTools 的 Computed 面板，确认生效的
max-height值是否明显小于你菜单实际高度 - 删掉项目里所有手动给
.navbar-collapse设的height或max-height，避免干扰过渡 - 别用
max-height: none或fit-content—— 它们会让 CSS 过渡动画完全失效
怎么安全地覆盖 .navbar-collapse.show 的 max-height
必须保留一个足够大的、可动画的值，同时避免在小屏设备上触发渲染卡顿。
- 通用稳妥写法：
.navbar-collapse.show { max-height: 120vh !important; }——vh单位能自适应屏幕，120% 确保覆盖绝大多数内容，又不会无限拉高 - 如果菜单项极少（比如只有 3–5 个
.nav-link），可精确估算：每项约 48px（含 padding + line-height），加 20–40px 余量，写成max-height: 200px更轻量 - 确保这条规则放在自定义 CSS 文件末尾，或使用足够高的选择器权重（如
.navbar.navbar-expand-lg .navbar-collapse.show），避免被 Bootstrap 原生样式覆盖
为什么改了 max-height 还是被截？常见干扰点
即使 max-height 足够大，内容仍可能视觉上“消失”，往往是因为子元素脱离了文档流或定位异常。
-
.dropdown-menu默认是position: absolute，不占父容器高度；点击后弹出层可能向上溢出.navbar-collapse区域 —— 给它加.navbar-collapse.show .dropdown-menu { position: static !important; } - 检查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }，移动端折叠状态不需要这个 -
.navbar-collapse默认没有position: relative，导致absolute子元素参考 viewport 定位，被 fixed 导航栏压住 —— 补上position: relative可修复定位上下文 - 字体或图标加载延迟可能导致首次展开时高度计算偏小，临时加
transition: none排查，确认是否动画问题
响应式断点和 max-height 是两回事，别混着调
有人试图通过改 @media 查询或 navbar-expand-* 类来解决截断，但这是无效路径。断点控制的是“何时折叠”，而 max-height 控制的是“折叠后展开多高”。两者完全解耦。
哪怕你把断点从 768px 改成 1200px，只要没动 .navbar-collapse.show 的 max-height，菜单照样会被切。
真正容易被忽略的是：下拉菜单在折叠状态下仍由 Popper.js 动态计算 top 值，而 .navbar-collapse 的 max-height 并不包含这个弹出层高度 —— 这种错位比单纯调高 max-height 更难一眼发现。
