根本原因是max-height动画依赖固定估算值而非真实内容高度，导致多行文字、大padding或下拉菜单等场景下内容被overflow:hidden截断。
为什么移动端展开菜单被截断
根本原因不是代码写错，而是 max-height 动画依赖一个固定估算值（比如 1000px），而 Bootstrap 的 JS 并不计算真实内容高度。当导航项含多行文字、大 padding、.dropdown-menu 或图标字体加载延迟时，实际高度就超了——内容直接被 overflow: hidden 切掉。
- 检查是否手动给
.navbar-collapse设了max-height或height，删掉它们 - 确认子元素（如
.nav-link、.dropdown）没意外加overflow: hidden或position: absolute导致脱离文档流 - 临时加
transition: none禁用动画，看是否还截断——若不截了，基本就是max-height不够
怎么安全地增大 navbar-collapse 展开高度
不能设 max-height: none，那会彻底破坏过渡动画；也不能用 100% 或 fit-content，它们不触发 CSS 过渡。必须用足够大的像素值，同时兼顾小屏性能。
- 通用稳妥方案：
.navbar-collapse.show { max-height: 120vh !important; } - 若只有 3–5 个链接，可精确估算：每项约
48px，加余量写成max-height: 200px更轻量 - 避免在
@media查询里重复覆盖，统一在全局 CSS 最后追加，用!important确保生效
下拉菜单（.dropdown）撑高或溢出怎么办
移动端折叠菜单里的 .dropdown 默认是 position: absolute，不占父容器高度，但它的弹出层可能向上溢出 .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% }，这会让下拉框往上跑
点击链接后菜单不自动收起？别写 JS
这不是样式问题，是行为缺失。Bootstrap 5 原生支持「点击即跳转 + 自动收起」，不需要额外 JS。
- 为每个可跳转的
<a></a>标签加上：data-bs-toggle="collapse"和data-bs-target=".navbar-collapse.show" - 关键在
.show—— 它只匹配当前已展开的折叠容器，不会误关未展开的菜单 - 确保
href是有效跳转地址（如href="/about"或href="#section"），否则收起逻辑不触发
.navbar-collapse 的 max-height 又没把它的弹出层高度算进去——这两者叠加，比单纯调高 max-height 更难一眼发现。
