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索引来实现nav功能并出现在其他内容的顶部。尝试将以下内容应用于开头部分标签：

    <section class="navigation position-absolute container-fluid" style="z-index: 1;">

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

1 个答案: