根本原因是响应式断点未同步调整：桌面正常而手机导航栏变矮，系 .navbar-collapse.show 的 max-height 未随自定义高度联动，导致折叠菜单内容截断；须在媒体查询中覆盖 max-height、padding、line-height 等属性并确保 bootstrap 变量全局重编译。
为什么桌面正常、手机上导航栏突然变矮了
根本原因不是没改对，而是响应式断点里没同步调整。Bootstrap 5 的 .navbar-expand-lg（或 sm/md）生效后，.navbar 会脱离默认的 flex 布局约束，但折叠状态下的 .navbar-collapse 仍受 max-height 和内部 padding 影响，而这个高度默认没随你自定义的桌面高度联动。
常见现象：你设了 .navbar { padding: 1rem; }，桌面看着刚好，一缩到手机宽度，汉堡菜单弹出后内容被截断、文字挤成两行、图标错位——其实是 .navbar-collapse.show 的 max-height 还卡在默认的 300px 或 80vh，没按新高度比例放大。
- 检查 DevTools 的
Computed面板，展开手机视图，看.navbar-collapse.show的实际max-height值是否足够容纳所有菜单项 - 别只改
.navbar，必须加一句：.navbar-collapse.show { max-height: 70vh; }（数值按需调，建议 ≥ 60vh） - 如果用了
.navbar-nav .nav-link自定义了padding，确保在媒体查询内也覆盖一次，例如：@media (max-width: 991.98px) { .navbar-nav .nav-link { padding: 0.75rem 1rem; } } - 注意 Bootstrap 5 断点是整数：
992px，不是991.98px；写错会导致样式不触发
用 CSS 覆盖时，哪些属性必须一起动
单设 height 几乎无效，因为 Bootstrap 5 已移除 min-height: 50px，但靠 padding + line-height + font-size 共同撑高。只改一个，其他会把布局拉歪。
- 优先改这三组：
.navbar { padding-top: 0.75rem; padding-bottom: 0.75rem; }、.navbar-brand, .nav-link { padding-top: 0.5rem; padding-bottom: 0.5rem; line-height: 1.2; } - 若品牌区有图标，
.navbar-brand img很可能被vertical-align: middle或默认line-height拉高，加vertical-align: top;或height: 1.5rem;显式控制 - 避免用
!important，改用更精确的选择器，比如：.navbar.navbar-expand-lg { padding: 0.75rem 1rem; }比泛泛的.navbar优先级更高 - 如果用了
.fixed-top，记得同步补body { padding-top: 64px; }（数值对应你的新导航栏高度），否则页面首屏内容会被遮住
折叠菜单弹出后高度不够、内容溢出怎么办
这不是导航栏本身的问题，而是 .navbar-collapse 的动画和尺寸约束没更新。它默认用 max-height 控制展开高度，且过渡动画依赖这个值。
- 直接设置：
.navbar-collapse { max-height: none; }最简单，但会失去收起动画；适合内容项少、不需要动画的场景 - 要保留动画，就得给
.navbar-collapse.show设一个足够大的max-height，比如：.navbar-collapse.show { max-height: 500px; transition: max-height 0.3s ease-in-out; } - 如果菜单项动态加载（如权限控制后渲染），纯 CSS 不够用，得用 JS 监听
shown.bs.collapse事件，手动计算并设max-height - 别忽略
.dropdown-menu：它的top和margin-top可能还按旧$navbar-height计算，需要额外覆盖：.dropdown-menu { margin-top: 0.5rem; }
用 Sass/Less 改变量时最容易漏掉的一步
改了 $navbar-height 并不等于万事大吉。这个变量参与多个组件的计算，比如下拉菜单间距、分隔线位置、甚至表单控件在导航栏内的垂直对齐。
- 除了
$navbar-height，顺手检查是否要同步调$navbar-brand-font-size、$navbar-padding-y、$navbar-nav-link-padding-y，它们都在同一个_variables.scss文件里 - 改完必须重新编译整个 Bootstrap，不能只替换
navbar.css——否则.dropdown-menu的top偏移还是按旧值算，导致下拉菜单悬空或贴顶 - 如果你项目里混用了 Bootstrap 4 和 5 的 CSS（比如 CDN 引了 v5，但本地 Sass import 了 v4 的 _variables），变量名可能不一致：
$navbar-height在 v4 是$navbar-height，v5 仍是，但 v4 的$navbar-brand-height在 v5 已废弃，别误用
真正麻烦的永远不是“怎么设高度”，而是设完发现桌面菜单对齐了，手机里汉堡按钮的 icon-bar 间距不对、下拉箭头偏移、甚至右侧 .navbar-text 被截断——这些都源于高度变更没传导到所有依赖它的子规则。动手前，先打开 DevTools 的 Computed 面板，逐个断点看真实生效的值。
