Bootstrap加fixed-top后内容被遮盖，根本原因是默认56px的body padding不匹配自定义/响应式navbar高度；最稳解法是在首个内容容器上用pt-*类（如pt-5或pt-xxl-5）占位，或对锚点目标设scroll-margin-top。
直接加 fixed-top 后内容被遮盖，不是 Bootstrap 没留空间，而是它留的空间没生效或不够用——常见于自定义高度、响应式断点切换、父容器干扰等场景。
为什么 fixed-top 加了但内容还是被盖住
Bootstrap 5 确实会自动给 <body> 加 padding-top，但这个值是基于默认 navbar 高度（约 56px）计算的。一旦你改了字体大小、内边距、行高，或在移动端折叠后 navbar 高度变矮，这个 padding 就不匹配了。
- 检查 computed styles 中
<body>的实际padding-top值，和当前 navbar 渲染高度是否一致 - 如果用了
height: 72px或font-size: 1.25rem+py-4，默认 padding 肯定不够 - 某些 UI 框架（如 AdminLTE）或自定义 wrapper 会把
<body>包进一个overflow: hidden容器里，导致 Bootstrap 的 body padding 被截断或忽略 - 页面开头有
margin-top: -20px或transform: translateY(-10px)，也会让首屏内容“上浮”进 navbar 底下
最稳的占位方案：用 pt-*<code> 类直接作用于首屏容器
比改 <body> 更可控，尤其适合响应式高度变化大的项目。Bootstrap 的 pt-* 工具类能随断点自动调整，不用 JS。
- 在
<nav class="navbar fixed-top"></nav>后面的第一个内容容器（比如<main>或<div class="container">）上加pt-5（对应默认 56px） - 若 navbar 高度为 72px，可选
pt-xxl-4（64px）或pt-xxl-5（80px），或直接写pt-6（Bootstrap 5.3+ 支持数字后缀，pt-6= 48px，pt-7= 56px，pt-8= 64px，需查自己版本文档） - 更灵活的做法：定义自定义类
.navbar-offset，配合媒体查询适配不同断点下的高度，例如：@media (max-width: 768px) { .navbar-offset { padding-top: 52px; } } @media (min-width: 769px) { .navbar-offset { padding-top: 72px; } }
滚动锚点跳转后内容被遮盖怎么办
点击 <a href="#section1"> 跳过去，结果 section1 的标题被 navbar 盖住——这不是占位问题，而是浏览器原生 scrollIntoView 行为没考虑 fixed 元素。
- 别依赖
padding-top或margin-top修复这个，它们对锚点跳转无效 - 必须用 JS 在跳转后微调滚动位置：
scrollBy(0, -56)或window.scrollBy(0, -window.innerHeight * 0.08) - 推荐监听所有
.nav-link点击事件，preventDefault()后手动scrollIntoView+scrollBy，避免全局影响 - 如果用的是原生
id锚点（非 JS 控制），可在目标元素上加scroll-margin-top: 72px（CSS 属性，支持 Chrome 69+/Firefox 68+），这是目前最干净的解法
sticky-top 失效时先查这三件事
sticky-top 不是 fixed-top 的简化版，它对 DOM 结构和 CSS 环境更敏感，失效往往不是代码写错了，而是上下文被破坏了。
- 导航栏的**直接父元素**是否设置了
overflow: hidden、overflow: auto或overflow: scroll？只要有一个，sticky就会被限制在这个容器内 - 是否在
<body>外层套了自定义布局容器（如<div class="app-wrapper">），且该容器设了height: 100vh或display: flex？这时 sticky 作用域变成它，不是视口 - 是否在该元素上同时用了
transform（如scale(0.99)）、will-change或filter？这些会创建新层叠上下文，直接禁用 sticky 行为
真正难处理的不是加不加 fixed-top，而是当它和自定义样式、第三方框架、移动端 WebView、键盘弹出共存时，那个 padding 到底该算谁的高度、作用在哪个节点、什么时候重算——这时候靠死记硬背类名不如打开 DevTools 看 computed height 和 layout 块的实际位置。
