直接修改 .navbar 的 padding 和 line-height 即可生效，因其高度由二者共同决定；需同步调整各响应式断点下的 padding，并修正 .navbar-collapse.show 的 max-height 防截断。
直接改 .navbar 的 padding 和 line-height 就够了，硬加 height 或 min-height 反而会破坏折叠逻辑，尤其在移动端展开时内容被截断。
为什么只调 padding 和 line-height 就生效
Bootstrap 5 的 .navbar 默认不设固定高度，视觉高度完全由 padding-top/padding-bottom 和子元素（如 .nav-link、.navbar-brand）的 line-height 共同撑起。改这两个值最轻量、最可控：
-
.navbar { padding: 0.75rem 1rem; }是桌面端常用起点 -
.nav-link, .navbar-brand { line-height: 1; }防止文字上下留白或压扁 - 若用了自定义字体，首次加载可能因字体未就绪导致高度抖动，可临时加
transition: none排查 - 别保留旧项目里残留的
min-height: 50px—— Bootstrap 5 已弃用，它会覆盖你新设的padding
响应式断点必须同步覆盖
桌面看着正常，手机上又变矮？大概率只改了默认状态的 padding，漏掉了媒体查询里的重置：
-
.navbar-expand-lg对应断点是@media (max-width: 991.98px)（小数点后两位是 Safari 兼容写法，不能简写） - 必须同时写：
.navbar { padding: 0.75rem 1rem; }和@media (max-width: 991.98px) { .navbar { padding: 0.5rem 1rem; } } - 若用的是
.navbar-expand-md，断点应为767.98px；.navbar-expand-sm则是575.98px - 用 DevTools 的 Computed 面板确认不同断点下真实生效的
padding值，别只看 Styles 面板里的声明
移动端折叠菜单高度被截断？重点调 .navbar-collapse.show 的 max-height
折叠菜单展开后只显示几行、下面空白被切掉，90% 是因为 .navbar-collapse.show 的 max-height 不足。Bootstrap 用的是固定估算值（如 300px），不是动态计算真实高度：
- 加这条规则：
.navbar-collapse.show { max-height: 120vh !important; }——120vh足够覆盖绝大多数菜单，又保留过渡动画 - 避免用
max-height: none或fit-content，它们会让过渡失效，导致“闪现” - 如果菜单项极少（比如就 3–4 个
.nav-link），可精确估算：max-height: 240px更轻量 - 检查是否误给
.navbar-collapse加了height或max-height的媒体查询覆盖，删掉它们
.nav-link 的 padding 才是折叠态点击区域的实际主力
很多人只调 .navbar 的内边距，却忽略 .nav-link 在折叠态下直接决定每项高度和点击区域大小：
- 默认
py-2（即padding-top/bottom: 0.5rem）在小屏下常显局促，建议改为py-2 px-3或显式写padding: 0.5rem 0.75rem; - 若链接含图标或文字换行，
py-2可能不够，需提升至py-3（padding-top/bottom: 1rem） - 切勿给
.nav-item加margin模拟间距——折叠后它变垂直堆叠，水平margin会变成顶部空白，破坏对齐 -
.navbar-brand若被压扁，加line-height: 1;防止文字基线留白
真正难调的从来不是“怎么改”，而是改完发现桌面正常、手机上又矮了一截——因为响应式类（如 .navbar-expand-lg）会在断点切换时重置样式，且 .navbar-collapse 容器本身不继承父级 padding，它的高度逻辑是独立的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
