Bootstrap fixed-top类导航栏遮挡div问题求助

嘿，这个问题太常见啦！当你给导航栏加上fixed-top类后，它会脱离正常的文档流，悬浮在页面顶部，所以下面的内容（比如你的h1「Yehey!!!」所在的div）就会默认从页面最顶端开始渲染，自然就被导航栏挡住了。给你几个简单有效的解决思路：

方法1：用Bootstrap内置间距类快速解决 #

Bootstrap默认的fixed-top导航栏高度是56px，你可以直接给<body>标签加上pt-5类（pt是padding-top的缩写，5对应1.25rem，刚好匹配默认导航栏高度）：

<body class="pt-5">
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <!-- 导航栏内容 -->
  </nav>
  <div>
    <h1>Yehey!!!</h1>
    <!-- 其他内容 -->
  </div>
</body>

如果你的导航栏是自定义高度（比如加了更大的字体、额外元素），可以用pt-6或者自定义间距类来调整数值。

方法2：自定义CSS精准控制 #

如果你需要更灵活的布局调整，直接写CSS设置顶部内边距或外边距：

给body加padding（影响全局布局） #

body {
  padding-top: 70px; /* 数值根据你导航栏的实际高度调整 */
}

给目标div加margin（仅调整局部内容） #

如果不想影响整个页面布局，只给被遮挡的div设置上边距：

/* 假设你的div有个类叫content-wrap */
.content-wrap {
  margin-top: 70px;
}

👉 小技巧：用浏览器开发者工具（按F12）选中导航栏，查看它的offsetHeight属性，就能得到准确的高度值，再对应设置padding/margin就不会出错啦！

方法3：结合scrollspy的官方最佳实践（可选） #

如果你的页面用到了滚动监听（scrollspy），Bootstrap官方也推荐通过给body设置padding-top来避免内容被固定导航栏遮挡，这个逻辑和方法1一致，只是更贴合官方规范。

内容的提问来源于stack exchange，提问作者Beldion