加pt-5起步但需按实际navbar高度设padding-top：查devtools中offsetheight，在首个内容容器（如）上用pt-6或内联style="padding-top:xxpx"；锚点跳转遮挡则用scroll-margin-top作用于目标元素自身，并配合媒体查询适配响应式高度。
fixed-top加了但首屏内容被盖住，怎么补空间？
不是 Bootstrap 没留空间，而是它默认给 body 加的 padding-top: 56px 只匹配原始 navbar 高度。你只要改过 font-size、padding、加了 logo 或用了自定义高度，这个值就失效了。
最稳做法是绕过 body，直接在第一个内容容器上设内边距：
- 检查浏览器 DevTools 的 Computed 面板，看
.navbar实际渲染高度（别信 CSS 里写的height，要看offsetHeight） - 在
<nav class="navbar fixed-top"></nav>后面紧跟的容器（比如<main></main>或<div class="container">）上加 <code>pt-5（≈48px）起步，不够就试pt-6（64px）或pt-7（72px） - 如果高度不规则（比如 78px），直接写内联样式：
style="padding-top: 78px"，比猜类名更可靠 - 别用
margin-top替代——外边距合并会让空白消失；也别只给main加，若它前面还有未设样式的section，照样被盖
锚点跳转后标题被 navbar 盖住，CSS 怎么修？
scroll-margin-top 是目前最干净的解法，但它必须作用在带 id 的目标元素自身上，不是父容器。
例如你的页面有 <h2 id="faq">常见问题</h2>，就得给它加：
h2[id] {
scroll-margin-top: 56px;
}
注意三点：
- 值必须和当前生效的 navbar 高度一致，建议用 CSS 自定义属性统一管理：
:root { --nav-height: 56px; }，再写scroll-margin-top: var(--nav-height) - 响应式下 navbar 高度会变（移动端常为 48px），需配合媒体查询覆盖：
@media (max-width: 768px) { h2[id] { scroll-margin-top: 48px; } } - IE 和旧版 Safari 不支持该属性，如需兼容，fallback 方案是用
:target+padding-top/margin-top组合
为什么 sticky-top 在 Bootstrap 4 里经常失效？
sticky-top 不是 fixed-top 的平替，它依赖滚动上下文，而 Bootstrap 4 默认没帮你管好这个上下文。
典型失效场景：
-
.navbar的**直接父元素**设置了overflow: hidden或overflow: auto—— sticky 会被截断在这个容器内 - 整个页面套在某个自定义布局容器里（比如
<div class="layout-wrapper">），且该容器没设 <code>height或overflow-y: auto - 父容器是 flex 布局但没设
min-height: 100vh，导致 Safari 下 sticky 不触发 - 导航栏内部用了
transform或position: relative，创建了新的定位上下文，影响子菜单定位 - 给
.navbar-collapse加position: relative - 或者在
.dropdown-menu上加data-bs-popper="static"（Bootstrap 4 需手动引入 Popper 1.x 并启用该属性） - 顺手删掉可能存在的错误媒体查询：
@media (max-width: 991.98px) { .dropdown-menu { top: 100% } }—— 折叠状态下不需要这条规则
真要“滚动一段再固定”，Bootstrap 4 没原生支持，得靠 JS 监听 scroll 事件动态切换 fixed-top 类并同步调整 body 的 padding-top。
移动端下拉菜单被截断，关键在哪？
小屏点开 .navbar-toggler，下拉项只显示半截，根本原因不是 z-index 不够，而是 .dropdown-menu 的定位参考错了。
.dropdown-menu 默认用 position: absolute，但它的父容器 .navbar-collapse 在 Bootstrap 4 中没设 position: relative，所以它往上找最近的相对定位祖先——结果是 body，正好被 fixed-top 导航栏压住。
解决办法只有两个，选一个就行：
记住：所有修复都得基于实际渲染高度，而不是文档写的默认值。每次改完记得清缓存、硬刷新，再打开 DevTools 看 computed styles —— 那才是真实世界。
