Bootstrap固定导航栏遮挡内容及间距设置问题求助

问题原因 #

fixed-top类会让导航栏脱离文档流，不再占据页面正常布局空间，下方元素会直接从页面顶部开始计算位置，因此被导航栏遮挡。你使用的pt-5未达到预期效果，大概率是因为导航栏实际高度超过了该类对应的2rem值。

解决方案 #

1. 用Bootstrap内置变量自动适配（推荐）

Bootstrap 5内置了--bs-navbar-height变量，它会自动匹配导航栏的实际高度，给body设置这个值作为padding-top，就能完美避开导航栏：

body {
  padding-top: var(--bs-navbar-height);
}

也可以直接内联到body标签：

<body style="padding-top: var(--bs-navbar-height);">

2. 调整padding类的数值

如果不想用CSS变量，可以根据导航栏实际高度，替换pt-5为更大的padding类，比如pt-6（对应2.5rem）或pt-7（对应3rem）：

<body class="pt-6">

3. 给首个内容块加margin-top

直接给导航栏下方的header添加margin-top，比如mt-5：

<header class="bg-light py-5 mt-5">

这种方法适合仅单个内容块在导航栏下方的场景，通用性不如给body加padding。

修正后的完整代码示例 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<style>
body {
  padding-top: var(--bs-navbar-height);
}
</style>

<body>
  <nav class="navbar navbar-expand-lg fixed-top">
    <div class="container">
      <a class="navbar-brand me-auto" href="#">Zello Painel</a>
      <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
        <div class="offcanvas-header">
          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Zello Painel</h5>
          <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
          <ul class="navbar-nav justify-content-center flex-grow-1 pe-3">
            <li class="nav-item">
              <a class="nav-link mx-lg-2" aria-current="page" href="index.php">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2" href="#">Funcionários</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2 active" href="encurtador.php">Encurtador</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2" href="#">teste</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2" href="#">teste</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2" href="#">teste</a>
            </li>
            <li class="nav-item">
              <a class="nav-link mx-lg-2" href="#">teste</a>
            </li>
          </ul>
        </div>
      </div>
      <a href="../php/logout.php" class="login-button">Sair</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
  </nav>

  <header class="bg-light py-5">
    <div class="container px-4 px-lg-5 my-5">
      <div class="text-center text-white">
        <h1 class="display-4 fw-bolder text-danger">Shop in style</h1>
      </div>
    </div>
  </header>
</body>

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