手机上 navbar 仍显矮，因未覆盖响应式断点下的 padding 规则（如 @media (max-width: 991.98px)），且 .navbar-collapse 不继承父级 padding，折叠菜单高度受 max-height 和 .nav-link 内边距共同影响，需同步调整 body padding-top 防遮挡。
为什么改了 .navbar 的 padding 桌面正常，手机上还是矮？
因为 bootstrap 的响应式类（如 .navbar-expand-lg）会在断点切换时重置内边距。你只改了默认状态的 padding，但没覆盖 @media (max-width: 991.98px) 下的规则——这个小数点是 safari 兼容 hack，实际断点应按 992px 对齐，而很多自定义 css 写成了 991px 或漏掉了媒体查询。
更隐蔽的问题是：移动端折叠后，.navbar-collapse 容器本身不继承父级 padding，它靠 max-height 和内部子项撑开，所以即使你调高了 .navbar 的上下内边距，折叠菜单展开后的视觉高度仍可能被截断。
- 检查 DevTools 的 Computed 面板，确认
.navbar在不同断点下实际生效的padding-top/padding-bottom - 若用了
.navbar-expand-sm，必须同时覆盖@media (max-width: 575.98px)下的.navbar和.navbar-collapse样式 - 别依赖
!important覆盖响应式规则——它容易在某个断点失效，优先用更高 specificity 的选择器，比如.navbar.navbar-expand-lg { padding: 0.75rem 1rem; }
.nav-link 的 padding 在折叠/展开态表现不一致？
这是最常被忽略的细节：.nav-link 的内边距在桌面展开态影响水平间距，在移动端折叠态则直接影响可点击区域高度和文字垂直居中。Bootstrap 默认用 px-2（左右各 0.5rem），但折叠后若链接文字换行或含图标，padding-top/padding-bottom 不足就会让文字贴顶或压底。
- 统一控制：用
.nav-link { padding: 0.375rem 1rem; }替代分散的py-*/px-*类 - 响应式拆分：小屏用
py-2 px-3，大屏用py-3 px-4，避免在.navbar-expand-md下出现“左松右紧” - 如果品牌图（
.navbar-brand）被压扁，加line-height: 1;重置，否则padding会被line-height干扰 - 切勿给
.nav-item加margin来“模拟”链接间距——折叠后它会变成垂直堆叠，水平 margin 变成顶部空白
折叠菜单展开后内容被截断，max-height 该设多大？
Bootstrap 的 .navbar-collapse.show 动画依赖固定 max-height 值过渡，不是动态计算真实高度。设太小会截断，设太大（如 100vh）又可能在低端机上触发渲染卡顿。
- 安全值参考：每项
.nav-link约48px高（含 padding + line-height），乘以最大预期项数再加20px余量。例如 6 项 →max-height: 320px - 用
vh单位更稳妥：写成.navbar-collapse.show { max-height: 80vh; }，既留出标题栏空间，又避免溢出屏幕 - 禁用动画排查：临时加
transition: none;到.navbar-collapse，看是否真因高度不足导致截断 - 如果用了
.dropdown，注意.dropdown-menu是position: absolute，不占高度——但它的触发项（.nav-link）若有大padding，仍会撑高容器
自定义高度后，.fixed-top 导致页面内容被遮挡？
这是上线前最容易漏掉的一环：.navbar.fixed-top 会让导航栏脱离文档流，但页面主体不会自动下移。你调高了 .navbar，却忘了同步调整 body 的 padding-top。
- 计算公式：取
.navbar的最终height或min-height值（不是padding总和），例如height: 64px→body { padding-top: 64px; } - 响应式补丁：如果
.navbar在小屏下高度变为56px，需配对写@media (max-width: 991.98px) { body { padding-top: 56px; } } - 用 CSS 变量简化维护：定义
:root { --navbar-height: 64px; }，然后.navbar { height: var(--navbar-height); }和body { padding-top: var(--navbar-height); }
真正难调的不是单个属性，而是同一套 padding 值在桌面展开、移动端折叠、下拉菜单嵌套、固定定位这四种状态下的连锁反应。每次修改后，必须在 Chrome DevTools 里切三个视口（桌面、iPad、iPhone）逐项验证，尤其注意折叠菜单首次展开时的动画帧和最终静止态。
