Bootstrap：轮播中断页面上的半透明导航栏覆盖 css

Question

我正在尝试将透明的 bootstrap 导航栏覆盖到 bootstrap 轮播上，我遇到了一些问题，我可以将导航栏准确地放在我想要的位置使用下面提供的代码，但问题是这会破坏页面 css 并且应该位于滑块下方的内容然后会出现在滑块上方以及导航栏上。

css:

.navbar-wrapper {
    position:relative;
}
.carousel {
    position:absolute;
    top:60px;
}
.carousel-inner {
    width: 100%; 
    overflow: hidden;
}
.navbar {
    position:absolute;
    top:0;
    z-index:10;
    background: rgb(0, 0, 0); opacity: 0.85;
    width:100%;
}

正如您从导航栏中看到的那样 html 我只添加了 "navbar" 的导航栏 class 因为我只是想使用更少的代码直到我将导航定位到我所在的位置希望它是，我会在分页问题解决后添加其他行。保留或保留代码不会改变分页问题，所以我猜这与导致问题的轮播的实际 css 有关。 html:

    <div class="navbar-wrapper">
        <div class="navbar">
        </div>   
    </div><!-- /navbar-wrapper -->


    <!-- simple bootstrap carousel -->
     <div id="carousel-generic" class="carousel slide small-browser-margins reposition-top" data-ride="carousel">

        <ol class="carousel-indicators">
           <li data-target="#carousel-generic" data-slide-to="0" class="active"></li>
           <li data-target="#carousel-generic" data-slide-to="1"></li>
           <li data-target="#carousel-generic" data-slide-to="2"></li>
           <li data-target="#carousel-generic" data-slide-to="3"></li>
        </ol>

        <div class="carousel-inner">
           <div class="item active">
              <img src="images/image1.jpg" alt="" class="img-responsive">
           </div>
           <div class="item">
              <img src="images/image2.jpg" alt="" class="img-responsive">
           </div>
           <div class="item">
              <img src="images/image3.jpg" alt="" class="img-responsive">
           </div>
           <div class="item">
              <img src="images/image4.jpg" alt="" class="img-responsive">
           </div>       
        </div>
     </div><!-- /#carousel-generic -->

为清楚起见添加了图片，所有文字都应位于轮播下方。

Answer 1

哦，亲爱的...喝杯茶，再看看东西，这就是我要做的，对 css 的一个非常小的改变：

.navbar-wrapper {
    position:relative;
}
.carousel {
    top:0;
}
.carousel-inner {
    width: 100%; 
    overflow: hidden;
    }
.navbar {
    position:absolute;
    top:0;
    z-index:10;
    background: rgb(0, 0, 0); opacity: 0.85;
    width:100%;
}

Bootstrap：轮播中断页面上的半透明导航栏覆盖 css

Bootstrap: Semi-transparent navbar overlay on carousel breaks page css

overlay

navbar

carousel

twitter-bootstrap