直接改.navbar的height会失效，因其默认由padding和line-height控制视觉高度；应通过调整padding-block及配套元素（如toggler、brand、dropdown）样式实现响应式适配。
直接改 .navbar 的 height 会失效？原因在这里
bootstrap（尤其 v4/v5）默认用 padding 和 line-height 控制视觉高度，不是靠 height。强行设 height: 80px 往往被内部弹性布局或行高撑开，或者导致文字错位、下拉菜单偏移。
真正起效的是覆盖其内边距和行高组合：
-
.navbar { padding-top: 0.5rem; padding-bottom: 0.5rem; }—— 这比调height更稳 - 如果用了
.navbar-brand图标+文字，还要同步调.navbar-brand img的height和margin - 折叠菜单（
.navbar-collapse）在小屏下默认高度由内容决定，不继承父 navbar 高度，需单独处理
响应式场景下：大屏加高，小屏保持紧凑
你可能想桌面端导航栏 72px，手机折叠后还是原来那种紧凑高度（比如 56px）。Bootstrap 的断点类（如 .d-none .d-lg-flex）帮不上忙，得靠媒体查询手动切。
推荐写法（以 Bootstrap 5 为例）：
@media (min-width: 992px) {
.navbar {
padding-block: 1.25rem; /* ≈ 72px 总高 */
}
}
@media (max-width: 991.98px) {
.navbar {
padding-block: 0.75rem; /* 小屏保持紧凑 */
}
}- 用
padding-block替代padding-top/padding-bottom，语义更清晰 - 别用
!important硬顶——它会让后续调试崩溃，尤其当你引入第三方组件时 - 注意
.navbar-toggler的height和font-size也要同步调，否则汉堡图标上下居中会失准
折叠菜单展开时“撑高”页面？这是 collapse 插件的默认行为
点击汉堡按钮后，.navbar-collapse 展开，但高度是内容自然高度，不会自动填满视口——这常被误认为“没改成功”。其实它和 navbar 高度无关，是独立区域。
- 若要全屏展开，给
.navbar-collapse.show加position: fixed; top: 0; left: 0; width: 100%; height: 100vh; - 但注意：此时需手动处理滚动（
overflow-y: auto），否则长菜单会溢出不可见 - 别忘了加
z-index，不然可能被轮播图或模态框盖住 - 移动端 Safari 对
vh有兼容问题（地址栏缩放影响），稳妥起见可用100%+min-height: 100vh
自定义高度后下拉菜单对不齐？检查 .dropdown-menu 的 top 偏移
导航栏变高后，.dropdown-toggle 的垂直位置变了，但 .dropdown-menu 默认仍按原始行高计算 top，结果悬停时菜单往上飘或卡在半空。
- 最简修复：给
.dropdown-menu加top: 100% !important;（Bootstrap 5 默认就是这个，但某些定制主题会覆盖） - 更健壮的做法：重置
.dropdown的position上下文，确保父级.nav-item是position: relative - 如果用了
.navbar-nav .nav-link自定义字体大小，记得同步调.dropdown-menu的font-size和padding，否则视觉比例失调
实际改高导航栏最难的不是代码，是得同时盯住 navbar、toggler、brand、dropdown、collapse、移动端 viewport 行为这六七个地方——漏一个，就有一个地方“看起来怪怪的”。
