Bootstrap旋转木马 - 风格的分页点

Question

我有一个Bootstrap 3旋转木马,有3张白色背景图像.我的分页点现在丢失了,因为它们有一个带有透明中心的白色边框(在我的例子中,也是白色).我如何使用CSS将这些颜色设计为更暗的颜色？提前致谢!

这是我的旋转木马内部(非常标准):

   <div class="carousel-inner">
     <div class="item active">
       <img src="images/img1.png" alt="img1">
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>

     <div class="item">
       <img src="images/img2.png" alt="img2">
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>

     <div class="item">
       <img src="images/img3.png" alt="img3">
       <br>
       <div class="carousel-caption">
         <h3>...</h3>
       </div>
     </div>
   </div>

Answer 1

看看你提供的标记,我没有看到指标.确保幻灯片中显示以下标记.

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

要更改指示灯颜色,您需要在两个不同的位置更改它.第一个是一般指示颜色,它将改变所有颜色.第二个是活动幻灯片指示器的颜色.

.carousel-indicators li {
    background: #ccc;
}

.carousel-indicators .active {
    background: #666;
}