直接改 .navbar 的 height 会失效，因其默认为 flex 布局且高度由内容撑开；应优先调整 padding 和 line-height，并注意响应式断点、gap 间距及下拉菜单 top 计算。
直接改 .navbar 的 height 会失效？原因在这里
Bootstrap 5 的 .navbar 默认使用 flex 布局且高度由内容撑开，硬设 height 会导致子元素（如 .navbar-brand、.navbar-nav）溢出或垂直错位。真正起作用的是内边距和行高组合——padding 控制整体高度，line-height 影响文字垂直居中。
- 优先修改
.navbar的padding-top和padding-bottom，比如设为0.5rem可显著收窄高度 - 若导航项文字偏高，需同步调整
.navbar-brand和.nav-link的line-height（建议设为1.2或1.3，避免默认的1.5过大） - 别忘了响应式断点：小屏幕下
.navbar-collapse展开时，padding可能被重置，需用@media (max-width: 991.98px)单独覆盖
.navbar-nav 项间距太挤？用 gap 而不是 margin
Bootstrap 5 的 .navbar-nav 是 flex 容器，其子项 .nav-item 默认无间距。老办法加 margin-right 容易在最后一项多出空白，且响应式折叠后仍存在。
- 直接给
.navbar-nav设gap: 1rem（推荐），它会在所有.nav-item之间均匀插入间隙，折叠/展开均生效 - 若需兼容旧浏览器（IE），改用
margin-inline-end: 1rem并为最后一项加:last-child { margin-inline-end: 0 } - 注意
gap不影响移动端折叠菜单内的列表项间距，那里要单独作用于.navbar-collapse .navbar-nav .nav-link
自定义高度后下拉菜单错位？关键在 .dropdown-menu 的 top 计算
当减小 .navbar 高度后，.dropdown-toggle 的垂直位置变化，但 .dropdown-menu 默认以 top: 100% 对齐，可能悬空或遮挡。
- 最稳妥方式：给
.dropdown-menu加margin-top: 0.25rem（或你实际的navbar内边距值），微调起始位置 - 避免用
top: Xpx，因为不同断点下.navbar高度可能不同，应配合@media分别设置 - 如果用了
line-height缩小文字高度，也要检查.dropdown-menu的padding-top/padding-bottom，否则内部文字会贴边
覆盖 Bootstrap CSS 的顺序和选择器强度必须足够
Bootstrap 5 的 CSS 文件加载顺序和选择器权重决定了你的样式能否生效。直接写 .navbar { padding: 0.5rem 1rem; } 很可能被框架内联或更具体的选择器覆盖。
- 确保你的自定义 CSS 在
bootstrap.min.css之后引入 - 必要时提高选择器强度，例如用
.navbar.navbar-expand-lg { padding: 0.5rem 1rem; }或body .navbar - 慎用
!important：仅当调试确认是权重问题时临时加，上线前应改用更具体的选择器替代 - 如果用 Sass，推荐在
$navbar-padding-y等变量处重定义，再重新编译，一劳永逸
gap 和 padding 的组合，比死磕 height 稳定得多。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
