javascript - 垂直对齐指示器 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>

垂直对齐指示器的最佳方式是什么，以便指示器始终均匀分布在轮播中使用的图像的高度上，并且每个指示器的空间相等？我注意到，由于 css 属性(可能是默认值)，id 为 carousel-example-generic 的元素的高度会根据轮播中使用的图像而变化 height: auto; .

我应该使用如下所示的公式:

id 为 carousel-example-generic 的元素高度/指示器数量 = 指示器高度？

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

我想实现这样的目标 JSFiddle ，但我不想为我的指示器使用固定的高度数字，我希望它们始终使用轮播中可以使用的完整空间。

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

Answer 1

您可以使用 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