造型引導轉盤指標

Question

你好，我試圖讓默認引導轉盤指標是非常薄的黃線卡在底部如下所示。

https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37

我他們是在頁面的底部，但我似乎無法將它們轉換爲矩形或改變它們的顏色。

HTML

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

CSS

.carousel-indicators { 
    margin: 0px; 
    height: 0px; 
} 

    .carousel-indicators ol { 
     width: 100%; 
    } 


    .carousel-indicators li{ 
     height: 3px !important; 
     border-radius: 0px !important; 
     width: 25%; 
    } 

Answer 1

像這樣的事情？請注意，寬度並不完全準確，因爲我只是把它做成了33％。

.item img { 
 
    width: 100%; 
 
    height: auto 
 
} 
 

 
.carousel { 
 
    position: relative; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 

 
ol.carousel-indicators { 
 
    position: absolute; 
 
    bottom: 0; 
 
    margin: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: auto; 
 
} 
 

 
ol.carousel-indicators li, 
 
ol.carousel-indicators li.active { 
 
    float: left; 
 
    width: 33%; 
 
    height: 10px; 
 
    margin: 0; 
 
    border-radius: 0; 
 
    border: 0; 
 
    background: transparent; 
 
} 
 

 
ol.carousel-indicators li.active { 
 
    background: yellow; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<div id="carousel" class="carousel slide" data-ride="carousel"> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel" data-slide-to="1"></li> 
 
    <li data-target="#carousel" data-slide-to="2"></li> 
 
    </ol> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="http://placehold.it/200x100" alt="Slide 1"> 
 
     <div class="carousel-caption"> 
 
     Slide 1 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/200x100" alt="Slide 2"> 
 
     <div class="carousel-caption"> 
 
     Slide 2 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/200x100" alt="Slide 3"> 
 
     <div class="carousel-caption"> 
 
     Slide 3 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>