直接给首个内容容器加padding-top是最稳解法，因body的margin-top会与子元素发生外边距折叠且不响应导航栏高度变化；推荐用scroll-margin-top解决锚点偏移问题。
直接给首个内容容器加 padding-top，值等于导航栏实际高度，这是最稳、最易调试的解法。
为什么 margin-top 在 body 上不管用
因为 body 的 margin-top 在多数浏览器中会与子元素（比如第一个 section）的上外边距发生折叠（margin collapse），导致视觉上“没生效”。更糟的是，它不响应导航栏高度变化——比如你加了 padding 或改了 font-size，body { margin-top: 60px } 就立刻不准了。
推荐做法是：不用 body，改用第一个内容块本身来预留空间：
-
section、header或.container这类紧接在<nav class="fixed-top"></nav>后面的元素，直接加padding-top - 值要精确：打开开发者工具，运行
getComputedStyle(document.querySelector('.navbar')).height，拿到真实像素值（比如"72px"） - 别用
mt-*工具类叠加pt-*，否则间距翻倍
Bootstrap 5 中该用哪个类名补高
Bootstrap 自带的间距工具类里，pt-5（3rem ≈ 48px）、pt-6（4rem ≈ 64px）最常用。但默认 navbar 高度在不同设备下会变（移动端可能压缩，大屏可能加 padding），所以：
- 不要硬写
pt-6就完事；先检查真实高度，再决定用pt-6还是内联style="padding-top: 72px" - 如果用了
navbar-expand-lg，小屏下 navbar 折叠后高度可能变矮，此时固定写死的pt-6反而留空过多——建议只对桌面端生效：@media (min-width: 992px) { .content-first { padding-top: 72px; } } - 避免在
上设style或class，容易污染全局布局逻辑
锚点跳转时内容仍被遮住怎么办
用户点击 #features 这类链接后，浏览器把 <section id="features"></section> 顶部拉到视口顶端，结果刚好卡在 fixed 导航栏下面——这是最典型的“锚点偏移失效”。
纯 CSS 解法（无需 JS）：
- 给目标元素加
scroll-margin-top：例如section[id] { scroll-margin-top: 72px; } - 这个属性告诉浏览器：“滚动到该元素时，让它顶部往上退 72px”，正好露出导航栏下方内容
- 注意兼容性：
scroll-margin-top在 Safari 15.4+、Chrome 69+、Firefox 97+ 支持良好；IE 完全不支持，但 Bootstrap 5 本就不支持 IE - 别试图用
:target+padding-top模拟，那会导致页面“闪动”或触发两次重排
下拉菜单也被盖住？那不是同一个问题
导航栏遮内容和下拉菜单被截断，表面相似，根源完全不同：前者是文档流空间缺失，后者是层叠上下文（stacking context）错乱。
如果你发现 .dropdown-menu 在点击后只显示半截，重点检查：
- 它的父级
.navbar是否有transform、filter或backdrop-filter？这些属性会创建新层叠上下文，让z-index: 1000失效 - 别只调
.dropdown-menu的z-index，优先给.navbar加z-index: 1050（Bootstrap 5 中.modal是 1050，设成 1050 才能压过模态框） - 确认
.dropdown元素本身有position: relative（Bootstrap 默认加了，但自定义封装时容易漏）
真正麻烦的从来不是怎么加 padding，而是忘了导航栏高度会随响应式、字体、缩放比例动态变化——每次改样式，都得重新量一次 getComputedStyle(...).height。
