垂直排列的指標，引導旋轉木馬

Question

默認情況下，指標水平的底部，分別對齊，

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <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> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img src="..." alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="..." alt="..."> 
 
     <div class="carousel-caption"> 
 
     ... 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div>

什麼是垂直對齊的各項指標最好的辦法，使各項指標總是均勻分佈在傳送帶內使用的圖像的高度，每個指示符的空間相等？我注意到編號爲carousel-example-generic的元素的高度根據傳送帶內使用的圖像而變化，這是由於css屬性（可能是默認值）height: auto;。

是否應使用式，看起來像：元件的

高度與指標carousel-example-generic /量=指示器的高度的一個id？

我應該使用JavaScript來實現我在這裏要求的嗎？

我想要達到這樣的效果JSFiddle，但我不想爲我的指標使用固定高度的數字，我希望它們始終使用它們可以在旋轉木馬中使用的全部空間。

編輯：我的猜測是，指標的高度應該用我在以下JSFiddle中顯示的公式計算。

Answer 1

首先你刪除或註釋左，右控制

.carousel-indicators li{ 
display: block; 
width: 10px; 
height: 10px; 
margin-bottom: 10px; 
} 

.carousel指標李顯示爲 'inline-block的' 是改變 '塊' 指標顯示垂直

.carousel-indicators .active { 
width: 12px; 
height: 12px; 
margin-bottom: 10px; 
background-color: #fff; 
} 

給空間對於指標來說，設置margin-bottom是10px，活動類別也是

.carousel-indicators{ 
height: 350px; 
display: table-cell; 
vertical-align: middle; 
float: none; 
} 

指標顯示爲您的圖像大小設置中間高度（滑塊）

Answer 2

您可以使用javascript實現結果。

您可以讀取傳送帶的高度併除以li元素編號。

var carouselHeight = $("#carousel-example-generic").css("height"); 
    var elements = $("#carousel-example-generic li").length; 
    var indicatorHeight = Math.floor(Number(carouselHeight.replace("px", ""))/elements); 

    $("#carousel-example-generic .carousel-indicators li").css("height", indicatorHeight + "px"); 

我做了一個簡單的JSFiddle