垂直排列的指标，引导旋转木马

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