垂直對齊的指示器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