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

Bootstrap 4中的切换菜单工作正常，但该菜单在我页面上所有其他内容后面打开。我试着给导航条一个9999的z索引，但没有用

我不明白为什么？有人能帮忙吗？谢谢

HTML

---

.navbar dark

会使您的

文本变为白色，因此在默认背景色下不可见

删除

.navbar dark

或为其提供背景：（

.bg info

，

.bg dark

，

.bg primary

等）

看到了

---

如果这不是问题所在（这只是因为没有为您的代码片段提供足够的细节），请在您的问题中提供答案（这实际上表明了您正在描述的问题）。

---

提示：使用编辑器中的按钮创建代码段。还要确保您添加了所有必需的内容。

你好，tao，感谢您的反馈，不幸的是，这不起作用，但这里有一个错误的工作示例@Ryan，TBH，我很惊讶你的小提琴能演奏出来。您正在从引导

v4.0.0

导入CSS，您没有导入

popper.js

（对于

v4.*

是必需的），您正在导入

v3.3.4

的其余

.js

依赖项

v4

是对lib的完全重写。它与v3不兼容。它们使用不同的标记、不同的postcss编译器和不同的javascript模块体系结构。由于您似乎正在使用

v4

标记，下面是您的示例。

<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>

.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;
}