bootstrap atlıkarınca göstergesi uzak değil mi?

Question

Şu anda buraya geliyorum ve bootstrap carousel gösterge mesafesinin neden eşit olmadığını merak ediyorum?

Eğer 1. ve 2. göstergesi (mermi) arasındaki resim mesafeye görebileceğiniz gibi.

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

Yalnızca her merminin genişliğini ve yüksekliğini ve etkin durumunu değiştiriyorum.

here

birisi bu konuda yardımcı olabilir harika olurdu codepen çalışma?

Answer 1

Kodunuz çalışıyor görünüyor. Ancak, önyükleme dosyalarını ekleyerek numaralı Jquery 'un doğru sürümünü eklemeniz gerekir. Aşağıya bakın:

sürüm açıklamaları (değil son)

açıklamalara dayanarak belirtilen dahil

GÜNCELLEME ekledi ekran görüntüsü:

#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>