Bootstrap如何修改Navbar导航栏在移动端折叠菜单开启后的最大高度

根本原因是.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 里看到内容明明存在，但被“裁掉”了。

1. 检查是否手动给 .navbar-collapse 加了 height 或 max-height（尤其在媒体查询里），删掉它们
2. 确认子元素（如 .nav-link、.dropdown-menu）没意外设置 overflow: hidden 或 position: absolute 导致脱离文档流
3. 临时加 transition: none 禁用动画，看是否还截断——若不截了，基本就是 max-height 不够

怎么安全增大 .navbar-collapse.show 的 max-height

不能设 max-height: none（动画失效），也不能用 100% 或 fit-content（CSS transition 不支持这些关键字作为过渡终点）。必须用足够大、可动画的值。

1. 通用稳妥方案：.navbar-collapse.show { max-height: 120vh !important; } —— vh 相对视口，兼顾大小屏，!important 确保压过 Bootstrap 默认值
2. 精简场景（仅 3–5 个 .nav-link）：.navbar-collapse.show { max-height: 240px; } —— 每项按 48px 高度 + 余量，更轻量，避免大数值触发低端机重排卡顿
3. 别在 @media 查询里重复覆盖，统一放在全局 CSS 最后追加，靠 specificity 或 !important 生效

下拉菜单（.dropdown）导致的高度错位怎么处理

.dropdown-menu 默认是 position: absolute，不占 .navbar-collapse 高度，但它父级（如 .nav-item）若有 padding-block 或 min-height，视觉上会“变高”，却没被 max-height 包含——点开后菜单向上溢出、被切半，或整个折叠区突然撑高又错位。

1. 给 .navbar-collapse.show .dropdown-menu 加 position: static !important;，让它随文档流撑高容器
2. 或者改用 data-bs-popper="static" 属性禁用 Popper.js 定位：<ul class="dropdown-menu" data-bs-popper="static">
3. 排查是否在 @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 变化时，会拉高行盒高度。

1. 检查是否在 .navbar 或 body 上设置了非标准 font-size，它会放大 .navbar-toggler 的实际占位
2. 给 .navbar-toggler 显式设置 line-height: 1 和 vertical-align: top，避免基线浮动干扰
3. 如果用了自定义图标（如 SVG），确保其 height 和 vertical-align 与文本对齐一致，否则会撑开容器