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属性（可能是默认值）carousel-example-generic，ID为height: auto;的元素的高度会根据轮播中使用的图像而改变。

我应该使用类似于：

的公式

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

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

我想实现类似JSFiddle之类的东西，但我不想为指标使用固定的高度数，我希望它们始终使用它们可以在旋转木马中使用的完整空间。

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

Answer 1

首先删除或评论左右控件

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

.carousel-indicators li显示为＆＃39; inline-block＆＃39;是改变＆＃39;块＆＃39;指标垂直显示

.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

垂直对齐的指示器Bootstrap轮播

2 个答案: