折叠菜单展开后内容被截断的根源是.navbar-collapse.show的max-height过渡值不足，bootstrap采用固定估算值而非真实内容高度计算，导致多行文字、图标、下拉菜单等场景下内容被overflow:hidden裁切。
为什么折叠菜单展开后内容被截断
根本不是代码写错了，而是 .navbar-collapse.show 的 max-height 过渡值不够大。Bootstrap 用的是固定估算值（比如 300px 或 1000px），不计算真实内容高度。一旦导航项含多行文字、图标、.dropdown、大 padding，或图标字体加载延迟，实际高度就超了——内容直接被 overflow: hidden 切掉。
常见错误现象：.navbar-collapse.show 展开后只显示前两三个链接，底部空白，滚动条不出现；DevTools 里看到内容明明存在，但被“裁掉”了。
- 检查是否手动给
.navbar-collapse加了height或max-height（尤其在媒体查询里），删掉它们 - 确认子元素（如
.nav-link、.dropdown-menu）没意外设置overflow: hidden或position: absolute导致脱离文档流 - 临时加
transition: none禁用动画，看是否还截断——若不截了，基本就是max-height不够
怎么安全增大 .navbar-collapse.show 的 max-height
max-height 不能设为 none 或 fit-content，CSS transition 不支持这些值作动画终点，会直接让展开变“闪现”。必须用可动画、足够大、又不过度影响性能的值。
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }——vh相对视口，兼顾大小屏，!important确保压过 Bootstrap 默认规则 - 精简场景（≤5 个链接）：
.navbar-collapse.show { max-height: 240px; }—— 每项约 48px 高 + 余量，更轻量，避免低端机重排卡顿 - 别写
100%：它不触发过渡；也别在@media里重复覆盖，统一放全局 CSS 最后
下拉菜单导致展开后高度错位怎么办
.dropdown-menu 默认是 position: absolute，不占 .navbar-collapse 高度，但它父级（如 .nav-item）若有 padding-block 或 min-height，视觉上会“变高”，却没被 max-height 包含——点开后菜单向上溢出、被切半，或整个折叠区突然撑高又错位。
- 给
.navbar-collapse.show .dropdown-menu加position: static !important;，让它随文档流撑高容器 - 或者改用
data-bs-popper="static"属性禁用 Popper.js 定位：<ul class="dropdown-menu" data-bs-popper="static"></ul> - 排查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠态不需这个规则，删掉
容易被忽略的硬坑
改了还是没反应？不是选择器写错，而是被更高优先级规则或隐性约束卡住了。打开 DevTools 的 Computed 面板，看 .navbar-collapse.show 的 max-height 值到底有没有生效。
- 确认子元素没意外加
overflow: hidden或position: absolute，否则脱离文档流，父容器高度无法正确累积 - 检查是否用了自定义图标字体，首次展开时字体未就绪导致高度计算偏小；可临时加
font-display: swap优化字体加载 - 如果项目用了 Sass 编译流程，
$navbar-collapse-height变量仅影响 JS 控制逻辑，对纯 CSS 折叠无效；--bs-navbar-collapse-height只在启用data-bs-toggle="collapse"且使用原生 Collapse JS 时才生效
