Navbar折叠菜单的默认高度主要源于.navbar-collapse的min-height:48px及.navbar-nav的margin-bottom和.nav-link的padding累加，解决方式是重置min-height:auto、清除margin-bottom、调整padding，并优化.navbar-toggler的line-height与vertical-align。
Navbar折叠菜单的默认高度从哪来
Bootstrap 5 的 .navbar-collapse 在移动端展开时，高度由内部子元素撑开，但视觉上“太高”往往不是因为内容本身高，而是 .navbar-collapse 上默认的 min-height: 48px（来自 .navbar-nav 的 margin-bottom 和 .nav-link 的 padding 累加）+ .navbar-toggler 的垂直对齐方式导致的视觉冗余。
直接覆盖 collapse 容器的 min-height 和 padding
最有效的方式是定位到折叠后的容器，重置其最小高度和内边距：
.navbar-collapse {
min-height: auto !important;
}
.navbar-collapse .navbar-nav {
margin-bottom: 0;
}
.navbar-collapse .nav-link {
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
}
-
min-height: auto覆盖 Bootstrap 默认的48px最小高度（尤其在空导航或单条项时明显） -
margin-bottom: 0去掉.navbar-nav在折叠状态下额外的底部留白 -
padding缩小链接上下间距——0.5rem是常见安全值，既保持可点击性，又比默认1rem更紧凑
注意 .navbar-toggler 的 vertical-align 和行高影响
折叠按钮（.navbar-toggler）默认是 vertical-align: middle，配合 line-height: 1，但在某些字体或父容器 font-size 变化时，会拉高整个 .navbar 的行盒高度，间接抬升折叠菜单顶部位置。
- 检查是否在
.navbar或body上设置了非标准font-size，它会放大.navbar-toggler的实际占位 - 给
.navbar-toggler显式设置line-height: 1和vertical-align: top，避免基线浮动干扰 - 如果用了自定义图标（如 SVG），确保其
height和vertical-align与文本对齐一致，否则会撑开容器
用 CSS 自定义 --bs-navbar-collapse-height 变量（Bootstrap 5.3+）
Bootstrap 5.3 引入了 CSS 自定义属性支持，可以直接控制折叠区域高度逻辑：
.navbar {
--bs-navbar-collapse-height: 36px;
}
这个变量会影响 .navbar-collapse 内部的动画过渡和最小高度计算。但它只在启用 data-bs-toggle="collapse" 且使用原生 Collapse JS 时生效；如果你用的是纯 CSS 折叠（无 JS），该变量不起作用。
真正要改“看起来多高”，还是得回到前两步：删 min-height、调 padding、控 line-height。变量只是辅助，不是银弹。
