移动端折叠菜单内容被截断的根源是 .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（动画失效），也不能用 100% 或 fit-content（CSS transition 不支持这些关键字作为过渡终点）。必须用足够大、可动画的值。
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }——vh相对视口，兼顾大小屏，!important确保压过 Bootstrap 默认值 - 精简场景（仅 3–5 个
.nav-link）：.navbar-collapse.show { max-height: 240px; }—— 每项按 48px 高度 + 余量，更轻量，避免大数值触发低端机重排卡顿 - 别在
@media查询里重复覆盖，统一放在全局 CSS 最后追加，靠 specificity 或!important生效
下拉菜单（.dropdown）导致的高度错位怎么处理
.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 定位： - 排查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠态不需要这个 - 避免在
.dropdown-menu外层套.d-flex或flex-fill，它们会干扰max-height的渲染上下文
容易被忽略的盒模型干扰点
动画卡顿或跳变，往往不是 transition 时间设短了，而是 .navbar-collapse 自身的 border、padding 或 margin 挤占了可用空间，导致内容“突然弹出”。
- 确保
.navbar-collapse没设border或大padding—— 它们不参与max-height动画，但会压缩内容区域 -
.nav-link的padding是折叠菜单实际撑高的主力，不是可选项；小屏建议用py-2 px-3或显式padding: 0.5rem 0.75rem，含图标或换行时升到py-3 - 别给
.nav-item加margin模拟间距——折叠后它垂直堆叠，水平margin变成顶部空白，破坏对齐
实际项目中最容易被忽略的是：下拉菜单在折叠状态下仍受 Popper.js 控制定位，而 .navbar-collapse 的 max-height 又没把它的弹出层高度算进去——这两者叠加，比单纯调高 max-height 更难定位。
