html - Bootstrap 4-切换导航栏在所有内容后面打开

Question

Bootstrap 4中的切换菜单可以正常工作，但是该菜单在页面上所有其他内容的后面打开。我尝试将导航栏的z索引设置为9999，但这没有用。

我不知道为什么？有人可以帮忙吗？谢谢。

的HTML

<nav class="navbar navbar-expand-lg sticky-top navbar-dark" id="navbar-solid" role="navigation">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse dropdown" id="navbarToggler">
    <ul class="navbar-nav nav-fill">
       <li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li>
       <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
       <li class="nav-item"><a class="nav-link" href="#">About us</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Get in touch</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Info</a></li>
       <li class="nav-item"><a class="nav-link" href="#">FAQ's</a></li>
       <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
  </div>
</nav>

<header class="row col-lg-12 p-0 m-0">
  <div class="row p-0 m-0 brand-nav-row align-items-center">
      <div class="col-lg-3 offset-lg-1 pb-lg-0 pb-lg-4 col-12 offset-0 mt-4 mb-4"  style="text-align:center;">
         <a href="index.html"><img src="img/atv-logo-rgb.png" id="brand-logo" /></a>
      </div>
  </div>

  <div class="row" style="height:74%">
      <div id="header-overlay-text" class="col-lg-5 offset-lg-6 p-lg-0 pb-lg-5 align-self-xl-center align-self-lg-end align-self-sm-end p-sm-5">
          <h2 style="font-weight: 700;">Morbi enim sem tempus vel dignissim and hendrerit</h2>
          <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit vitae risus</p>
          <a href="#" title="contact us" class="button btn btn-primary">Contact us</a>
      </div>
  </div>
</header>

的CSS

.page header {
    background-color: #fff;
}
.home header {
    background: url('../img/title-image.png') no-repeat top left;
    height: 55rem;
    background-color: #ccc;
}
.navbar .nav-item a {
    font-size: 1.1em;
}

Answer 1

.navbar-dark导致<nav>的文本为白色，因此在默认背景色下不可见。

删除.navbar-dark或为其提供背景：（.bg-info，.bg-dark，.bg-primary等）。

见working。



如果这不是问题（仅仅是由于没有为您的摘要提供足够的详细信息而引起的），请在问题中提供一个minimal reproducible example（实际上显示了您正在描述的问题）。
提示：使用编辑器中的<>按钮创建一个代码段。还要确保将所有必需的dependencies添加到它。