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

【问题标题】：Bootstrap: Semi-transparent navbar overlay on carousel breaks page cssBootstrap：轮播上的半透明导航栏覆盖中断页面css
【发布时间】：2016-08-24 03:02:49
【问题描述】：

我正在尝试在引导轮播上实现透明引导导航栏覆盖，但我遇到了一些问题，我可以使用下面提供的代码将导航栏准确地放在我希望它所在的位置，但是问题是这会破坏页面 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 中看到的那样，我只添加了“导航栏”的导航栏类，因为我只是想使用更少的代码，直到我将导航定位到我想要的位置，当我将添加其他行时分页问题已修复。将代码输入或输出不会改变分页问题，所以我猜这与导致问题的轮播的实际 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 -->

为清楚问题而添加的图像，所有文本都应位于轮播下方。

【问题讨论】：

标签： twitter-bootstrap overlay carousel navbar

【解决方案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%;
}

【讨论】：