根本原因是.navbar-collapse.show的max-height过渡值不足且不能设为none或fit-content；应设为120vh或240px等足够大但可动画的固定值，并排查子元素overflow、定位及图标字体加载问题。
为什么移动端折叠菜单展开后内容被截断
根本不是代码写错了，而是 .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 定位：<ul class="dropdown-menu" data-bs-popper="static"></ul> - 排查是否在
@media (max-width: 991.98px)下误写了.dropdown-menu { top: 100% }—— 移动端折叠态不需要这个
容易被忽略的细节：font-size 和 line-height 的连锁影响
.navbar-toggler 的 vertical-align 和 line-height 看似无关，实则会间接抬升整个折叠区域的顶部位置。它默认是 vertical-align: middle，配合 line-height: 1，但在某些字体或父容器 font-size 变化时，会拉高行盒高度。
- 检查是否在
.navbar或body上设置了非标准font-size，它会放大.navbar-toggler的实际占位 - 给
.navbar-toggler显式设置line-height: 1和vertical-align: top，避免基线浮动干扰 - 如果用了自定义图标（如 SVG），确保其
height和vertical-align与文本对齐一致，否则会撑开容器
