ブートストラップ・カルーセル・インジケータが距離が等しくない？

Question

私は現在ここにスタックしており、なぜブートストラップカルーセルインジケータの距離が等しくないのか疑問に思っていますか？

あなたが第一と第二のインジケータ（弾丸）間の画像の距離で見ることができるように。

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

各弾丸の幅と高さ、およびアクティブな状態のみを変更します。

here

誰かがこれを助けることができればそれは素晴らしいことだがcodepenワーキング？

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>