如何在不使用固定顶部导航栏的情况下让 Bootstrap 导航栏在内容前面展开

Question

我试图让我的引导导航栏在页面内容前面展开。目前，当视口变得足够小并且它折叠成汉堡包切换时，在扩展时它会将页面内容向下移动。我希望它在内容前面扩展，而不是将所有内容都向下移动。我看到一些类似的帖子说你可以使用添加到导航栏的“固定顶部”类来实现这一点 - 我尝试过，它确实有效，但我宁愿不让导航栏固定顶部，并且无法弄清楚如何让它在前面展开而不是固定在顶部。我对 HTML/CSS 比较陌生，所以如果我在这里遗漏了一些值得注意的东西，我深表歉意。代码如下。

<section class="navigation">

    <nav class="navbar navbar-expand-lg navbar-dark">

      <a class="navbar-brand" href="index.html"><img class="home_icon" src="Home_icon.png"></a>

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav mr-auto">

          <li class="nav-item">

            <a class="nav-link" href="shows.html">SHOWS <span class="sr-only">(current)</span></a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="music.html">MUSIC</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="contact.html">CONTACT</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="about.html">ABOUT</a>

          </li>

        </ul>

      </div>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">

        <ul class="navbar-nav ml-auto">

          <li class="nav-item">

            <a class="nav-link" href="https://facebook.com/sweetchicle"><i class="fab fa-facebook-f social-icon"></i></a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://twitter.com/sweetchicleband"><i class="fab fa-twitter social-icon"></i></a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="https://www.instagram.com/sweetchiclemusic/"><i class="fab fa-instagram social-icon"></i></a>

          </li>

        </ul>

      </div>

    </nav>

  </section>

Answer 1

您可以使部分的位置绝对并使用容器流体来填充视口的宽度。还需要 z 索引来实现导航功能并显示在其他内容之上。尝试将以下内容应用于开头部分标签：&nbsp;&nbsp;&nbsp;&nbsp;<section&nbsp;class="navigation&nbsp;position-absolute&nbsp;container-fluid"&nbsp;style="z-index:&nbsp;1;">