直接修改 .navbar 的 padding 和 line-height 即可，无需设置 height 或 min-height；Bootstrap 5 依赖内边距和行高控制高度，硬设 height 会压缩内容、截断下拉菜单，且破坏响应式缩放与字体加载稳定性。
直接改 .navbar 的 padding 和 line-height 就够了，别碰 height 或 min-height —— Bootstrap 5 默认不设固定高度，硬加会破坏折叠逻辑，尤其在移动端展开时内容被截断。
为什么改 height 会导致变形和截断
Bootstrap 5 的 .navbar 是靠内边距和行高撑起视觉高度的，不是靠 height。一旦显式设置 height: 60px，它就会强制压缩内部元素（比如 .nav-link、.navbar-brand），导致文字上下溢出、图标错位、下拉菜单展开后被 .navbar-collapse.show 的 max-height 截断。
-
min-height: 50px是 Bootstrap 4 的残留规则，5.x 已移除，保留它反而会覆盖你新设的padding - 自定义字体加载延迟时，
height固定会让首次渲染高度抖动更明显 - 响应式断点（如
@media (max-width: 991.98px)）下，height不会自动缩放，而padding可以按需重写
怎么用 padding 和 line-height 稳住高度
桌面端常用起点是 .navbar { padding: 0.75rem 1rem; }，再微调子元素的垂直对齐：
-
.nav-link的line-height设为1或1.2，避免默认1.5造成上下留白过大 -
.navbar-brand若含 logo 图片，加height: 1.5rem+vertical-align: middle对齐文字 - 若用了
font-size: 1.25rem，同步把padding-top/padding-bottom从0.75rem提到1rem，保持视觉均衡 - 别漏掉响应式覆盖：比如
@media (max-width: 991.98px) { .navbar { padding: 0.5rem 1rem; } }
.navbar-collapse.show 被截断？重点调 max-height
折叠菜单展开后只显示前几项、下面空白被切掉，90% 是因为 .navbar-collapse.show 的 max-height 不足。Bootstrap 用的是静态估算值（如 300px），不是动态计算真实高度。
- 加
.navbar-collapse.show { max-height: 120vh !important; }—— 足够覆盖绝大多数菜单，又保留过渡动画 - 如果菜单项极少（比如就 3 个
.nav-link），可精确估算：max-height: 200px更轻量 - 避免用
max-height: none或fit-content，它们会让 CSS 过渡失效 - 检查是否在媒体查询里误写了
.navbar-collapse { max-height: 200px; }，它会覆盖.show状态
移动端下拉菜单撑不开容器？别怪 dropdown
点开下拉菜单后，整个折叠区域突然“变高”，但高度没被 max-height 包含，导致内容溢出顶部——这不是 .dropdown-menu 本身的问题，而是它默认 position: absolute，脱离了文档流，不参与父容器高度计算。
- 临时加
.navbar-collapse.show .dropdown-menu { position: static !important; }，让它重新撑高容器 - 或改用
data-bs-popper="static"属性禁用 Popper 动态定位，再配.dropdown-menu { top: 100% !important; } - 排查是否在
@media (max-width: 991.98px)下写了.dropdown-menu { top: 100%; }—— 小屏展开时不需要这个规则
真正难的不是让高度“看起来固定”，而是意识到：所有变形都源于对脱离文档流行为的误判。每次调 height 前，先打开 DevTools 查 getComputedStyle(document.querySelector('.navbar')).height —— 那个实时像素值，才是你该对齐的目标。
