Bootstrap 导航栏无内置 NavbarHeightAuto，自适应高度需手动控制内容撑开或 CSS 适配；常见问题包括折叠菜单截断、fixed-top 遮挡、移动端行高错位等，根源在于 min-height、padding、line-height、vertical-align 及子元素共同决定高度，且响应式断点、max-height 动画、dropdown 定位、fixed-top 布局破坏等均需针对性处理。
Bootstrap 导航栏本身没有内置的 NavbarHeightAuto 机制，所谓“自适应高度”实际是手动控制内容撑开或 CSS 主动适配的结果；直接依赖默认行为大概率会遇到折叠菜单截断、固定定位遮挡内容、移动端行高错位等问题。
为什么改了 padding 和 line-height 还是没变高？
常见原因不是样式没写对，而是被隐性规则覆盖或计算逻辑绕过：
-
.navbar的最终高度由min-height、padding、line-height和子元素（如.navbar-brand）的height或vertical-align共同决定，只调一个参数往往无效 - Bootstrap 5 移除了全局
min-height: 50px，但如果你项目里混用了旧版 CSS 或定制构建产物，它可能还藏在.navbar或.navbar-nav > li > a里 - 用 DevTools 检查 computed 面板时，注意看
height是auto还是具体像素值——如果是auto，说明它真正在“自适应”，但此时若子项有display: inline-block且未设vertical-align: middle，会导致基线对齐留白，视觉上显得“空高” - 响应式断点（如
@media (max-width: 991.98px)）下，.navbar-expand-lg会切换内边距和字体大小，必须在对应媒体查询里单独重置padding和font-size
.navbar-collapse.show 展开后内容被截断
这是“伪自适应”最典型的失败现场：折叠菜单展开时高度不够，多出的导航项直接被裁掉。根本不是内容没渲染，而是 max-height 动画卡死了真实高度。
- 不要删
max-height过渡，否则动画消失；应改为足够大的值，例如.navbar-collapse.show { max-height: 120vh !important; } - 避免用
max-height: none或fit-content，它们不触发 CSS 过渡，导致展开瞬间闪跳 - 如果导航项含
.dropdown，其.dropdown-menu默认position: absolute，不参与父容器高度计算——可临时加.navbar-collapse.show .dropdown-menu { position: static !important; }让它撑开 - 检查是否误给
.navbar-collapse设了height或overflow: hidden，这两者会直接压制内容溢出
固定顶部导航栏导致正文被遮盖
加了 fixed-top 后，页面内容从视口顶部开始渲染，自然会被导航栏盖住。这不是高度没变，而是布局流被破坏。
- 必须手动给
body补padding-top，值等于.navbar的实际高度（不是变量值，是 computed height） - 不能写死
padding-top: 64px—— 响应式下高度会变，要用 JS 动态设置，或改用 CSSscroll-margin-top（仅支持现代浏览器） - 更稳妥的做法是不用
fixed-top，改用sticky-top，它会在滚动时才吸附，且不脱离文档流，无需额外 padding - 如果必须用
fixed-top且导航栏高度动态变化（比如 logo 图片加载完成才确定尺寸），得监听window.resize和img.onload事件重新计算 body padding
真正可靠的“自适应”，从来不是靠某个开关打开，而是明确控制每一层的高度来源：品牌图用 height: auto + max-height，链接用 line-height 对齐，折叠区用足够大的 max-height，固定定位用动态 padding-top 补偿。漏掉任意一环，都会在某个设备或状态下崩掉。
