旋转木马顶部的 Bootstrap 4 导航栏棒

Question

我的导航栏定位有点问题。我想把我的导航棒放在旋转木马的顶部。不是在轮播中，而是在轮播中，就像字幕一样，而是在所有滑块上。所以当滚动页面时，导航栏和轮播就等于隐藏了。

在文档中找不到。

试图将整个 放入轮播，但我认为这是不好的方式。

也许有一些像“fixed-top”这样的类，我应该把它放在哪里？

“navbar-static-top”也无法正常工作，或者我放错地方了？

这里是导航栏：

<nav class="navbar navbar-expand-md">
  <a class="navbar-brand" href="#">Navbar</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 bg-danger"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mx-auto nav-fill w-100">
      <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="#">Link1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link3</a>
      </li>
    </ul>

  </div>
</nav>

这里是轮播：

<div id="carousel-fade" class="carousel carousel-fade" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
    <li data-target="#carousel-fade" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-fade" data-slide-to="1"></li>
    <li data-target="#carousel-fade" data-slide-to="2"></li>
</ol>

<div class="carousel-inner embed-responsive embed-responsive-16by9" role="listbox">
  <div class="carousel-item embed-responsive-item active">
    <img src="slider1-2-1916x968.jpg" alt="First slide image" class="img-fluid">
    <div class="carousel-caption">
      <h3>First slide Heading</h3>
      <p>First slide Caption</p>
    </div>
  </div>

  <div class="carousel-item embed-responsive-item">
    <img src="slider2-2-1916x968.jpg" alt="Second slide image" class="img-fluid">
    <div class="carousel-caption">
      <h3>Second slide Heading</h3>
      <p>Second slide Caption</p>
    </div>
  </div>

  <div class="carousel-item embed-responsive-item">
    <img src="slider3-3-1916x968.jpg" alt="Third slide image" class="img-fluid">
    <div class="carousel-caption">
      <h3>Third slide Heading</h3>
      <p>Third slide Caption</p>
    </div>
  </div>
</div>

<a class="carousel-control-prev" href="#carousel-fade" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carousel-fade" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
</a>
</div>

Answer 1

我用非常简单的代码解决了这个问题。

只需添加

style="z-index:10;"

到导航栏。

完成！