如何让导航栏显示在英雄上方

Question

  <!-- Nav bar Contains links to self and other pages -->

  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      <a class="navbar-brand" href="./index.html">
        <img src="#" alt="Logo" width="55" height="30" class="d-inline-block align-text-top">
        .....
      </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 active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<!-- Contains main Contents of the page -->
<main>

    <!-- Hero 1 - Bootstrap Brain Component -->
     
 <section id = "hero" class="bsb-hero-1 px-3 bsb-overlay bsb-hover-pull" style="background-image: url('./assets/img/hero-img-1.jpg');">
   <div class="container-fluid">
    <div class="row justify-content-md-center">
     <div class="col-12 col-md-11 col-lg-9 col-xl-7 col-xxl-6 text-center text-white">
       <h2 class="display-3 fw-bold mb-3">Art of Design</h2>
       <p class="lead mb-5">Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.</p>
       <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
         <button type="button" class="btn bsb-btn-xl btn-light gap-3">Free Consultation</button>
       </div>
      </div>
     </div>
    </div>
</section>

我想让英雄部分固定在导航栏下方，当导航栏缩小时，我希望折叠项目显示在英雄上方，我应该怎么做才能使英雄位于导航栏下方？

Answer 1

要使用 Bootstrap 将小屏幕导航栏放置在英雄上方，可以使用 offcanvas 组件。您可以在这里查看： https://getbootstrap.com/docs/5.3/components/offcanvas/