手机端菜单展开内容被截断的根源是.navbar-collapse.show的max-height动画值不足，bootstrap用固定估算值而非真实内容高度，导致overflow:hidden裁剪；应设为120vh或240px等可动画值，并处理.dropdown-menu脱离文档流问题。
为什么手机端菜单展开后内容被截断
根本不是导航栏“矮了”，而是 .navbar-collapse.show 的 max-height 动画值不够大。Bootstrap 不计算真实内容高度，而是用写死的估算值（比如 300px 或 1000px）做过渡。一旦有换行文字、图标、.dropdown-menu，或字体加载延迟，实际高度就超了——内容直接被 overflow: hidden 切掉。
常见现象：.navbar-collapse.show 展开后只显示前两三个链接，底部留白，滚动条不出现；DevTools 里能看到 DOM 节点存在，但视觉上“消失”了。
- 临时加
transition: none禁用动画，如果此时内容完整显示，就坐实是max-height不足 - 检查是否手动给
.navbar-collapse加了height或max-height（尤其在@media里），删掉它们 - 确认子元素没意外设
overflow: hidden或position: absolute，否则脱离文档流，父容器无法感知真实高度
怎么安全设置 .navbar-collapse.show 的 max-height
max-height: none 和 fit-content 都不能用——CSS transition 不支持它们作动画终点，会导致展开“闪现”，失去过渡效果。
必须用可动画、足够大、又不过度影响性能的固定值：
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; }——vh相对视口，兼顾大小屏，!important确保压过 Bootstrap 默认规则 - 精简场景（≤5 个
.nav-link）：.navbar-collapse.show { max-height: 240px !important; }—— 每项按约 48px 高 + 余量，更轻量，避免低端机重排卡顿 - 别写
100%：它不触发过渡；也别在@media里重复覆盖，统一放全局 CSS 最后追加
下拉菜单（.dropdown）导致高度错位怎么办
.dropdown-menu 默认是 position: absolute，脱离文档流，.navbar-collapse 完全感知不到它的高度。点开后菜单向上溢出、被切半，或整个折叠区突然撑高又错位，本质是新高度没被 max-height 包含。
- 让下拉菜单参与撑高：
.navbar-collapse.show .dropdown-menu { position: static !important; } - 或禁用 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 值到底有没有生效。
- 确认子元素（如
.nav-link、.dropdown-menu）没意外加overflow: hidden或position: absolute - 检查是否用了自定义图标字体——首次展开时字体未就绪，可能导致高度计算偏小；可临时加
transition: none排查 - 别忽略
.navbar-toggler的line-height和vertical-align：若设为middle且父容器font-size变化，可能抬高整个行盒，间接挤压可用空间
position: absolute 的元素不占，overflow: hidden 的父容器会裁，transition 不支持的值会让动画失效。这些细节比数值本身更容易被忽略。
