最常用方法是同步修改 .navbar 默认及响应式断点下的 padding，如 .navbar { padding: 0.75rem 1rem; } 和 @media (max-width: 991.98px) { .navbar { padding: 0.5rem 1rem; } }，并确保 .nav-link、.navbar-collapse.show、body padding-top 等关键样式按断点逐一适配。
直接改 .navbar 的 padding 最常用，但必须覆盖所有断点
桌面看着正常，手机上导航栏还是压扁，大概率只改了默认状态的 padding，漏掉了响应式媒体查询。Bootstrap 5 的 .navbar-expand-lg 在 @media (max-width: 991.98px) 下会重置内边距——那个 .98px 是 Safari 兼容写法，不能简写成 991px 或 992px。
- 必须同步写两套：
.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 - 别用
!important硬盖，优先提高选择器权重，比如.navbar.navbar-expand-lg { padding: 0.875rem 1.25rem; } -
.navbar-brand若被压扁，加line-height: 1;防止文字基线留白
.nav-link 的 padding 影响折叠菜单高度，不是可选项
很多人只调 .navbar 的 padding，却忽略 .nav-link 才是移动端折叠菜单实际撑高的主力。它在展开态控制水平间距，在折叠态直接决定每项高度和点击区域大小。
- 默认
px-2 py-2（左右各 0.5rem，上下各 0.5rem）在小屏下常显局促，建议改为py-2 px-3或显式写padding: 0.5rem 0.75rem; - 若链接含图标或文字换行，
py-2可能不够，需提升至py-3（即padding-top/bottom: 1rem） - 切勿给
.nav-item加margin模拟间距——折叠后它变垂直堆叠，水平 margin 会变成顶部空白，破坏对齐 - 检查 DevTools 的 Computed 面板，确认
.nav-link在不同断点下真实生效的padding值
.navbar-collapse.show 的 max-height 必须够大，否则内容被截断
折叠菜单展开后底部链接消失、滚动条不出现，不是 JS 没加载，而是 .navbar-collapse.show 的 max-height 不足以容纳所有子项。Bootstrap 的过渡动画依赖固定值，不能设为 none 或 fit-content，否则动画失效。
- 每项
.nav-link实际高度 ≈ 48px（含padding+line-height），6 项就至少要max-height: 320px，再加 20–40px 余量更稳妥 - 推荐用
vh单位：例如.navbar-collapse.show { max-height: 120vh !important; }，避免极端长菜单溢出 - 若含
.dropdown，其.dropdown-menu默认position: absolute不参与撑高，可临时加.navbar-collapse.show .dropdown-menu { position: static !important; } - 禁用
overflow: hidden或height类似限制，它们会直接压制内容溢出
fixed-top 导航栏必须手动补 body 的 padding-top
加了 fixed-top 后正文被遮住，不是导航栏没变高，是布局流被破坏。Bootstrap 不会自动给 body 加边距，得你来算、来填。
- 不要依赖
pt-5这类预设类——pt-5 = 3rem ≈ 48px，而自定义导航栏可能高 72px、80px 甚至更高 - 最准的做法：打开 DevTools，选中
.navbar，看 Computed 面板里的height像素值，然后写style="padding-top: 72px"或自定义类.pt-navbar { padding-top: 72px; } - 如果高度随断点变化（比如桌面 64px、手机 56px），就得用媒体查询分别设置
body的padding-top - 注意：这个
padding-top是给body的，不是给第一个.container或.main区域
实际改高一个导航栏，最难的不是写几行 CSS，而是记住：每个断点都要查、每个子元素都要测、每次加 fixed-top 都得手动补 padding。漏掉其中一环，问题就会出现在最意想不到的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
