垂直对齐的指示器Bootstrap轮播

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> 

垂直对齐指示器的最佳方法是什么，以便指示器始终均匀分布在转盘内使用的图像高度之间，每个指示器的空间相等？ 我注意到id为carousel-example-generic的元素的高度由于css属性（可能是默认值）而基于轮播中使用的图像而改变height: auto; 。

我应该使用看起来像这样的公式：

具有carousel-example-generic ID的元素的高度carousel-example-generic /指标数量=指标的高度？

我应该使用JavaScript来实现我在这里要求的内容吗？

我想要实现像这样的JSFiddle ，但是我不想为我的指示器使用固定的高度数，我希望它们总是使用它们可以在旋转木马中使用的完整空间。

编辑：我的猜测是指标的高度应该用我在下面的JSFiddle中显示的公式计算。

Answer 1

首先您删除或评论左右控件

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

.carousel-indicators li显示为'inline-block'是改变'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