css - bootstrap 轮播指示器的距离不相等？

Question

我目前在这里，想知道为什么 bootstrap carousel 指示器距离不相等？

正如您在图片中看到的第一个和第二个指示器(子弹)之间的距离。

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

我只改变每个元素符号的宽度和高度以及事件状态。

工作代码笔 here

如果有人能帮忙解决这个问题就好了？

Answer 1

您的代码看起来运行良好。

但是，您需要在添加 Bootstrap 文件之前添加正确版本的 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>