加 fixed-top 后内容被盖住，因 Bootstrap 不自动给 body 加 padding-top，需手动设置；应使用 CSS 自定义属性配合媒体查询动态设置 body padding-top 和 html scroll-padding-top。
加 fixed-top 类后内容被盖住，不是 Bootstrap 没生效，而是它根本不会自动给 body 加 padding-top —— 这个留白必须你手动补。
为什么 Bootstrap 不自动加 body padding-top
Bootstrap 的 fixed-top 只负责设置 position: fixed; top: 0，它不干涉后续布局。所谓“自动加 padding”是常见误解，实际只在部分文档示例或旧版教程中被错误传播。真实行为是：导航脱离文档流，下方所有元素立刻上移，顶部直接撞到视口边缘。
-
body默认没有padding-top，哪怕用了fixed-top也不会变 - Bootstrap 的响应式导航高度本身不固定（桌面约 56px，小屏可能缩到 40–48px），无法用一个静态值兜底
- 如果你改过
.navbar的font-size、padding或加了图标，高度就更不可控
怎么设才真正有效：优先用 CSS 自定义属性 + 媒体查询
硬写 body { padding-top: 56px; } 在移动端会多出大片空白；用 pt-5 类又不够灵活。推荐统一管理高度变量：
:root {
--nav-height: 56px;
}
@media (max-width: 991.98px) {
:root {
--nav-height: 48px;
}
}
@media (max-width: 767.98px) {
:root {
--nav-height: 40px;
}
}
body {
padding-top: var(--nav-height);
}
- 把
--nav-height改成你实际测量的导航栏高度（用 DevTools 的 computed styles 看） - 媒体查询断点按你项目实际的
navbar-expand-*类来对齐，比如navbar-expand-lg对应991.98px - 别在
body上用margin-top替代 —— 它不影响文档流高度计算，可能导致首屏内容仍被裁切
容易踩的坑：padding-top 加了但还是遮挡
即使写了 body { padding-top: ... }，以下情况仍会导致遮挡：
-
body外层有position: relative或transform的 wrapper，干扰了定位基准 - 页面开头用了负外边距（如
mt-n5）或margin-top: -20px，抵消了 padding 效果 - 导航栏里嵌了
position: relative的子容器（比如自定义下拉菜单），意外创建新层叠上下文，让 padding 计算失效 - 用了
overflow-x: hidden在html或body上，某些浏览器会抑制根滚动行为，间接影响视觉对齐
比 padding-top 更彻底的方案：scroll-padding-top
如果遮挡发生在锚点跳转（比如点击 #section2 后标题被盖住），body 的 padding-top 其实解决不了——它只撑开静态布局，不影响滚动定位。此时该用：
html {
scroll-padding-top: var(--nav-height);
}
- 这个属性作用于根滚动容器（
html），告诉浏览器：“所有锚点滚动时，目标元素顶部要停在视口顶部往下偏移--nav-height的位置” - 必须写在
html上，写在body或main上完全无效 - 和上面的
--nav-height变量共用，响应式高度自动同步 - 注意：若页面启用了
overflow: hidden在html或body，此属性会静默失效
真正麻烦的不是加多少像素，而是得同时管住两件事：静态布局的留白（body padding-top）和滚动定位的偏移（html scroll-padding-top）。漏掉任一，都会在某个场景下突然遮挡内容。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
