Question

我正在尝试将透明引导程序导航栏覆盖到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类的“navbar”，因为我只想使用更少的代码，直到我将导航定位到我想要的位置，我将添加其他行分页问题是固定的。保留代码进入或退出不会改变分页问题所以我猜这是因为导致问题的轮播的实际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

1 个答案: