Bootstrap导航栏折叠菜单展开内容被截断的根本原因是max-height动画使用固定估算值而非动态计算真实高度，需通过增大max-height、调整dropdown定位或JS动态设置scrollHeight解决。
导航栏折叠菜单展开后内容被截断
bootstrap 默认用 .navbar-collapse 包裹折叠内容，配合 max-height: 0 + overflow: hidden 实现收起动画。但展开时若子项高度超出容器（比如多行文字、大 padding、嵌套表单），就会被截断——这不是 bug，是 css 动画过渡逻辑导致的。
根本原因是 Bootstrap 的 JS 在切换时只控制 max-height，而没动态计算真实高度；它用的是一个固定估算值（如 1000px），在某些场景下不够用。
- 检查你是否手动设置了
.navbar-collapse的max-height或height，删掉它们 - 确保子元素（如
.nav-link、.dropdown-menu）没有意外的overflow: hidden或position: absolute导致脱离文档流 - 如果用了自定义字体或图标，加载延迟可能导致首次展开时高度计算偏小，可加
transition: none临时禁用动画排查
覆盖 Bootstrap 的 max-height 过渡值
Bootstrap 5.3+ 把折叠菜单的高度过渡写死在 CSS 变量里：--bs-navbar-collapse-transition，默认是 max-height 0.35s ease-in，但关键不是时间，而是它依赖的 max-height 值本身。
你需要让展开后的 max-height 足够大，又不能设成 none（会破坏动画）。稳妥做法是用足够大的像素值，同时避免影响小屏设备性能：
- 在自定义 CSS 中加：
.navbar-collapse.show { max-height: 120vh !important; } - 不要用
100%或fit-content—— 它们不触发过渡动画 - 如果导航项极少（比如就 3 个链接），可以精确计算：每项约
48px，加点余量，写成max-height: 200px更轻量
移动端下 dropdown 菜单撑高 navbar-collapse
当折叠菜单里含 .dropdown，点击展开时，.dropdown-menu 默认是 position: absolute，不占父容器高度，但它的父级（如 .nav-item）可能有 min-height 或 padding，导致整体视觉“变高”却没被 max-height 涵盖。
更常见的情况是：dropdown 展开后，其 top 计算错误，向上溢出 navbar-collapse 区域，看起来像“被切掉”：
- 给
.dropdown-menu加position: static !important（仅限折叠状态），让它随文档流撑高容器 - 或者改用
.dropdown-menu-end+data-bs-popper="static"避免 popper.js 动态定位干扰 - 检查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠菜单不需要这个
用 JavaScript 动态设置 max-height（进阶）
如果你的导航结构动态生成（比如权限控制后菜单项数量不定），静态写死 max-height 容易失效。这时得靠 JS 算真实高度：
- 监听
show.bs.collapse事件，在展开前获取.navbar-collapse .navbar-nav的scrollHeight - 然后立刻设置：
collapseEl.style.maxHeight = collapseEl.scrollHeight + 'px';
- 注意：必须在
show.bs.collapse里设，不能等shown.bs.collapse—— 后者动画已开始，再改 height 会跳变 - 收起时记得重置为
''（空字符串），否则下次展开仍用旧值
真正难处理的不是高度本身，而是当用户快速连点两次汉堡按钮时，JS 和 CSS 动画状态不同步，scrollHeight 可能读到 0。这种情况下，宁可放弃动画，直接用 display: block/none 切换。
