元素隐藏在 .fixed-top 导航栏后面 - Bootstrap

Question

我希望你一切都好，我想问一下我在使用 Bootstrap 时遇到的一些问题，我已经阅读了 Bootstrap 文档，他们说。sticky-top 可能不再被某些浏览器支持；因此，我决定改用 .fixed-top，但是，当我使用 class 时，body 的一部分隐藏在导航栏后面，我想知道是否还有另一种方法修复此问题或使其工作的唯一方法是在 CSS 上添加 margin-top，因为 .pt-5 class 几乎不显示内容。像往常一样，非常感谢您的帮助。

:root {
  --body-font: "Roboto Mono", monospace;
  --main-font: "Caveat", cursive;
  --secondary-font: "Dosis", sans-serif;
  --primary-color: salmon;
  --secondary-color: rgb(71, 66, 65)
  --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
  font-family: var(--main-font);
  font-size: 22px !important;
}

.text-secondary{
  color: rgb(94, 94, 94);

}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="I'm Marizabelle Aldana, 27yo developer based in Guatemala, currently living in London.">

    <title>Marizabelle's website - Homepage</title>

    <link rel="stylesheet" href="src/styles.css" />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Anton&family=Caveat:wght@600&family=Dosis:wght@700&family=Roboto+Mono:wght@200&display=swap"
      rel="stylesheet"
    />

    <!-- CSS only -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

        <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  </head>
  <body>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand text-secondary" href="index.html">Home</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link text-secondary" href="about.html"
                >About me</a
              >
            </li>
                <li class="nav-item">
                  <a class="nav-link text-secondary" href="project.html">Projects</a>
                </li>
            <li class="nav-item">
              <a class="nav-link text-secondary" href="about.html#email">Contact me</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

    <div id="greeting">
      <img
        id="cat-icon"
        class="rounded mx-auto d-block pt-5"
        src="https://img.icons8.com/external-tulpahn-flat-tulpahn/64/000000/external-happy-cat-emoji-tulpahn-flat-tulpahn.png"
      />
      <br />
      <div class="sentence text-center">
        Hi
      </div>
    </div>
    </body>

Answer 1

一个合适的解决方案是根据固定导航栏的高度将 padding-top 添加到主要内容的开头。请参阅下面我所做的更改。

我在 .jumbotron 上添加了 fixed-height 只是为了测试滚动。

:root {
  --body-font: "Roboto Mono", monospace;
  --main-font: "Caveat", cursive;
  --secondary-font: "Dosis", sans-serif;
  --primary-color: salmon;
  --secondary-color: rgb(71, 66, 65) --box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.navbar-brand {
  font-family: var(--main-font);
  font-size: 22px !important;
}

.text-secondary {
  color: rgb(94, 94, 94);
}

.jumbotron {
  height: 3000px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <meta name="description" content="I'm Marizabelle Aldana, 27yo developer based in Guatemala, currently living in London.">

  <title>Marizabelle's website - Homepage</title>

  <link rel="stylesheet" href="src/styles.css" />

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Amatic+SC&family=Anton&family=Caveat:wght@600&family=Dosis:wght@700&family=Roboto+Mono:wght@200&display=swap" rel="stylesheet" />

  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand text-secondary" href="index.html">Home</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link text-secondary" href="about.html">About me</a
              >
            </li>
                <li class="nav-item">
                  <a class="nav-link text-secondary" href="project.html">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-secondary" href="about.html#email">Contact me</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <section style="padding-top: 4em;">
    <div class="jumbotron jumbotron-fluid position-relative">
      <div class="container">
        <h1 class="display-4">Fluid jumbotron</h1>
        <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
      </div>
    </div>

    <div id="greeting">
      <img id="cat-icon" class="rounded mx-auto d-block pt-5" src="https://img.icons8.com/external-tulpahn-flat-tulpahn/64/000000/external-happy-cat-emoji-tulpahn-flat-tulpahn.png" />
      <br />
      <div class="sentence text-center">
        Hi
      </div>
    </div>
  </section>
</body>

元素隐藏在 .fixed-top 导航栏后面 - Bootstrap

Elements hide behind .fixed-top navbar - Bootstrap

html

css

navbar

bootstrap-5