如何设置 Bootstrap 导航栏位置固定在顶部？

Question

我在使用 Bootstrap 导航栏时遇到了一些问题。我正在使用 Bootstrap v5.0.

每当 bootstrap 导航栏扩展时，它下面的内容也会下降。我不想要那个。我要内容不要下架
我设置了 position: fixed 但它不起作用并且表现异常。我希望 nav 固定在顶部。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./images/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: sans-serif;
            text-decoration: none;
            list-style: none;
        }
        header {
            background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
            height: 100vh;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            font-weight: bold;
        }
        .navbar-brand {
            font-size: 20px;
        }
        /* .navbar {
            position: fixed;
        } */
        #header-texts {
            height: 90vh;
            align-items: center;
        }
        #header-texts-1 {
            font-size: 55px;
        }
        #header-texts-2 {
            font-size: 20px;
            font-weight: normal;
        }
        #header-btn {
            background: #f24516;
            color: white;
            padding: 15px 20px;
            border-radius: 30px;
            letter-spacing: 0.8px;
        }
        /* ========================= Responsive ========================= */
        @media (max-width: 540px) {
            #header-texts-1 {
                font-size: 30px;
            }
            #header-texts-2 {
                font-size: 16px;
            }
        }
        @media (min-width: 992px) {
            .container {
                width: 100vw !important;
            }
            .navbar-expand-lg {
                background: transparent !important;
            }
            a {
                color: white !important;
            }
        }
    </style>
    <title>Creative</title>
</head>
<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
                        <div class="container-fluid">
                            <a class="navbar-brand" href="#">Start Bootstrap</a>
                            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                                <div class="navbar-nav" id="nav-items">
                                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                                    <a class="nav-link" href="#">About</a>
                                    <a class="nav-link" href="#">Services</a>
                                    <a class="nav-link" href="#">Protfolio</a>
                                    <a class="nav-link" href="#">Contact</a>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
            <div class="row text-center" id="header-texts">
                <div class="col">
                    <p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
                    <hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
                    <p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
                    <button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
                </div>
            </div>
        </div>
    </header>
    <div class="sec-2">
        architecto similique rerum, laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi. Hic similique autem iure distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi. Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores, omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit explicabo delectus quos excepturi, aut nam incidunt eius voluptas non harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla, temporibus incidunt alias commodi inventore error eligendi libero ea atque.
    </div>
    <!-- ========================= JavaScript ========================= -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

要修复 header，您只需使用

        .navbar {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
        }

但在那种情况下，您的主要内容将位于 header 下方，以修复向主要内容添加 YOUR_HEADER_HEIGHT 的上边距，类似这样

        #header-texts {
            margin-top: 60px; // your header height
            height: 90vh;
            align-items: center;
        }

Answer 2

我对你的代码做了一些修改。我所做的是将 nav 组件包装在 navbar-holder class 中，并向 class 添加必要的样式，您可以在代码中找到这些样式。我这边的另一个建议是，每当你要滚动时，你应该向导航栏添加另一种样式，比如添加深色背景，因为目前你的 navabr 背景是透明的，滚动时看起来不太好。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="./images/favicon.ico" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
      crossorigin="anonymous"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: sans-serif;
        text-decoration: none;
        list-style: none;
      }
      .navbar-holder {
        position: fixed;
        top: 0;
        width: 100%;
      }
      .with-bg {
        background: #000000 !important;
      }
      header {
        background: linear-gradient(
            rgba(45, 44, 48, 0.753),
            rgba(45, 44, 48, 0.753)
          ),
          url(./images/bg-masthead.jpg);
        height: 100vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        color: white;
        font-weight: bold;
      }
      .navbar-brand {
        font-size: 20px;
      }
      /* .navbar {
            position: fixed;
        } */
      #header-texts {
        height: 90vh;
        align-items: center;
      }
      #header-texts-1 {
        font-size: 55px;
      }
      #header-texts-2 {
        font-size: 20px;
        font-weight: normal;
      }
      #header-btn {
        background: #f24516;
        color: white;
        padding: 15px 20px;
        border-radius: 30px;
        letter-spacing: 0.8px;
      }
      /* ========================= Responsive ========================= */
      @media (max-width: 540px) {
        #header-texts-1 {
          font-size: 30px;
        }
        #header-texts-2 {
          font-size: 16px;
        }
      }
      @media (min-width: 992px) {
        .container {
          width: 100vw !important;
        }
        .navbar-expand-lg {
          background: transparent !important;
        }
        a {
          color: white !important;
        }
      }
    </style>
    <title>Creative</title>
  </head>
  <body>
    <header>
      <div class="navbar-holder" id="navigation-holder">
        <nav
          class="navbar navbar-expand-lg navbar-light bg-light"
          id="navigation"
        >
          <div class="container-fluid">
            <a class="navbar-brand" href="#">Start Bootstrap</a>
            <button
              class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNavAltMarkup"
              aria-controls="navbarNavAltMarkup"
              aria-expanded="false"
              aria-label="Toggle navigation"
            >
              <span class="navbar-toggler-icon"></span>
            </button>
            <div
              class="collapse navbar-collapse justify-content-end"
              id="navbarNavAltMarkup"
            >
              <div class="navbar-nav" id="nav-items">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
                <a class="nav-link" href="#">About</a>
                <a class="nav-link" href="#">Services</a>
                <a class="nav-link" href="#">Protfolio</a>
                <a class="nav-link" href="#">Contact</a>
              </div>
            </div>
          </div>
        </nav>
      </div>
      <div class="container">
        <div class="row">
          <div class="col"></div>
        </div>
        <div class="row text-center" id="header-texts">
          <div class="col">
            <p id="header-texts-1">
              YOUR FAVORITE SOURCE OF FREE<br />BOOTSTRAP THEMES
            </p>
            <hr
              class="mb-4"
              style="
                width: 5%;
                margin: auto;
                height: 5px;
                border: none;
                color: #ff0000;
                background-color: #ff0000;
                opacity: 1;
              "
            />
            <p id="header-texts-2">
              Start Bootstrap can help you build better websites using the
              Bootstrap<br />framework! Just download a theme and start
              customizing, no strings attached!
            </p>
            <button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
          </div>
        </div>
      </div>
    </header>
    <div class="sec-2">
      architecto similique rerum, laborum impedit pariatur repudiandae iusto
      ducimus soluta inventore quibusdam excepturi. Hic similique autem iure
      distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo
      cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam
      ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem
      velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae
      quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius
      laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum
      est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis,
      numquam enim deleniti a, pariatur laboriosam fugiat dignissimos
      perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero
      ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia
      laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo
      nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio
      aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci
      ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque
      blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi.
      Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium
      aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores,
      omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod
      distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione
      non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit
      explicabo delectus quos excepturi, aut nam incidunt eius voluptas non
      harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla,
      temporibus incidunt alias commodi inventore error eligendi libero ea
      atque.
    </div>
    <!-- ========================= JavaScript ========================= -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
      crossorigin="anonymous"
    ></script>
    <script>
      document.addEventListener("scroll", () => {
        const { scrollTop } = document.documentElement;
        const nav = document.querySelector("#navigation-holder");
        if (scrollTop === 0) {
          nav.classList.remove("with-bg");
        } else {
          nav.classList.add("with-bg");
        }
      });
    </script>
  </body>
</html>

如何设置 Bootstrap 导航栏位置固定在顶部？

How to set Bootstrap navbar position fixed at top?

html

css

twitter-bootstrap

bootstrap-5