bootstrap carousel指示器距离不相等？

Question

我目前正在这里堆叠，并想知道为什么引导旋转木马指示器距离不相等？

正如您所看到的第1和第2指标（子弹）之间的距离。

#carousel-example-generic-right .carousel-indicators .active {
    background-color: #990000;
}
.carousel-indicators li {
   width: 12px;
   height: 12px;
}

我只改变每个子弹的宽度和高度以及活动状态。

工作码本here

如果有人能帮忙解决这个问题会很棒吗？

Answer 1

您的代码看起来工作正常。

但是，您需要在添加引导程序文件之前添加正确版本的Jquery 。见下文：

<强>已更新

包含在评论中说明的版本（不是最新的）

根据评论，添加截图：

#carousel-example-generic-right {
  background-color: #ccc;
}
.carousel-indicators li.active {
  border: 1px solid #990000;
}
#carousel-example-generic-right .carousel-indicators .active {
  background-color: #990000;
}
#carousel-example-generic-right .carousel-indicators li {
  background-color: #fff;
}
.carousel-indicators li {
  width: 12px;
  height: 12px;
}
.item {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
}

<!-- jquery 1.11.1  -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- bootstrap 3.3.5 -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.js"></script>

<div id="carousel-example-generic-right" class="carousel slide white box-shadow-rounded" data-interval="false" data-ride="carousel" style="height:200px;">
  <ol id="aux-box-carousel-pagination" class="carousel-indicators">
    <li class="active" data-slide-to="0" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="1" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="2" data-target="#carousel-example-generic-right"></li>
    <li data-slide-to="3" data-target="#carousel-example-generic-right"></li>
  </ol>
  <div id="aux-box-carousel" class="carousel-inner" role="listbox">
    <div class="item active">
      Slide 1
    </div>
    <div class="item">
      Slide 2
    </div>
    <div class="item">
      Slide 3
    </div>
    <div class="item">
      Slide 4
    </div>

  </div>

</div>