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

【问题标题】：How to get Bootstrap navbar to expand in front of content without using a fixed-top navbar如何在不使用固定顶部导航栏的情况下让 Bootstrap 导航栏在内容前面展开
【发布时间】：2020-07-15 01:28:30
【问题描述】：

我正在尝试让我的引导导航栏在页面内容之前展开。目前，当视口变得足够小并且它折叠到汉堡切换时，在展开时它会向下移动页面的内容。我希望它在内容之前扩展而不是向下移动所有内容。我看到一些类似的帖子说你可以使用添加到导航栏的“固定顶部”类来实现这一点 - 我试过了，它确实有效，但我宁愿没有导航栏固定顶部，并且无法弄清楚如何让它在前面扩展而不是固定顶部。我对 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>

【问题讨论】：

标签： html twitter-bootstrap bootstrap-4 navbar

【解决方案1】：

您可以将部分的位置设为绝对位置，并使用 container-fluid 来填充视口的宽度。还需要一个 z-index 来制作导航功能并显示在其他内容之上。尝试将以下内容应用于开头部分标记：

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

【讨论】：

我不得不做一些小改动，但总体来说效果很好！我必须在样式表中进行绝对定位更改，而不是在 section 标记中进行内联。我还必须在导航栏下方的部分添加一些 padding-top，因为将定位更改为绝对会将实际页面内容向上移动到导航栏后面。
不错！您还可以尝试在导航栏下方添加一个空 div（如阴影），该 div 具有与导航相同高度和宽度的相对位置，以将其他内容向下推。任何可行的方法 - 干杯。