最稳的补偿方式是直接在body上加padding-top并配合scroll-margin-top，因fixed-top使nav脱离文档流，需整体下移页面内容且确保锚点跳转时目标元素不被遮挡。
直接在 body 上加 padding-top 是最稳的补偿方式，但值必须和导航栏真实高度严格对齐，否则小屏错位、锚点跳转仍被盖住。
为什么 padding-top 加在 body 上比加在 main 更可靠
Bootstrap 的 fixed-top 会让 nav 脱离文档流，所有后续内容默认从视口顶部开始渲染。加在 body 上能确保整个页面内容整体下移，不受内部嵌套结构（如 container、row）影响；而只给 main 加，若它前面还有 header 或空 div，那些元素照样会被盖住。
常见错误现象：
-
main { padding-top: 60px; }写了，但首屏文字还是被截掉一半 —— 因为main前面有个没设 margin/padding 的section - 用
margin-top替代padding-top，结果外边距合并导致留白消失
padding-top 值怎么取才不翻车
别硬写 56px 或 64px。Bootstrap 5 默认 navbar 高度是 56px（含 0.5rem 上下 padding），但一旦你改过 .navbar 的 padding、font-size 或加了 logo 图片，实际高度就变了。得看 DevTools 的 Computed 面板里 height 值，不是 min-height。
响应式场景下更要小心：
- 桌面端 navbar 高
72px，移动端折叠后变成48px—— 单一padding-top: 72px在手机上会多出一大块空白 - 断点必须和 Bootstrap 的
breakpoint对齐：@media (max-width: 991.98px)是旧写法，Bootstrap 5.3+ 推荐用整数@media (max-width: 991px) - 推荐用 CSS 自定义属性统一管理：
:root { --nav-height: 56px; }，再配合媒体查询动态改值
锚点跳转后标题仍被遮住？scroll-margin-top 必须配
即使 body 的 padding-top 没问题，点击 #section2 这类链接跳转时，浏览器默认把目标元素顶到视口最顶端，正好卡在 fixed-top 下面。这时光靠 padding 不管用。
解决方案是给所有带 id 的标题加一行 CSS：
h1[id], h2[id], h3[id] {
scroll-margin-top: var(--nav-height, 56px);
}
注意点：
- 这个属性必须加在目标元素自身上，不能只靠父容器撑开空间
- 值要和当前生效的导航高度一致，所以继续复用
--nav-height最省事 - IE 完全不支持，但 2026 年绝大多数项目已可忽略
用 sticky-top 替代 fixed-top 能绕过 padding 吗
不能。虽然 sticky-top 不脱离文档流，理论上不需要 padding-top，但它依赖滚动上下文 —— 如果父容器没设 height 或 overflow-y: auto，它就退化成普通定位，根本“粘”不住。更麻烦的是：iOS Safari 对 sticky 在 body 直接生效的支持依然不稳定，尤其在软键盘弹出后容易错位。
结论很实在：如果你只需要“始终可见”，且页面足够长，sticky-top 可以试试；但只要求“固定在顶 + 兼容稳”，fixed-top 配合精准的 padding-top 和 scroll-margin-top 仍是当前最可控的组合。
真正容易被忽略的，是媒体查询断点和自定义变量的同步更新 —— 改完 navbar 高度，忘了调 --nav-height，或者断点写成 992px 却没覆盖 991.98px，都会让某一个尺寸下突然失效。
