Önyükleme 3 varsayılan Carousel: Gösterge, slayt taşıyıcısının dışına ve dışına nasıl taşınır?

Question

Bootstrap 3'ün atlıkarınca göstergelerini slayt konteynerinin aşağı ve dışına taşımak için kolay ve temiz bir yol bu şekilde fotoğrafların üzerine yerleştirilmiyor? Göstergeleri taşımak istediğim yerde aşağıdaki resme bakın. Böyle kaydırıcı aşağıda onları zorlayabilir

Link to live code

<div class="container"> 
    <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"> 
      <div class="item active"> 
       <img src="http://placehold.it/1170x300.jpg" alt="..."> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1170x300.jpg" alt="..."> 
      </div> 

      <div class="item"> 
       <img src="http://placehold.it/1170x300.jpg" alt="..."> 
      </div> 

     </div> 

     <!-- Controls --> 
     <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span> 
     </a> 
     <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
     </a> 
    </div> 

</div><!--//container --> 

Answer 1

... atlıkarınca altında

.carousel-indicators { 
    bottom:-50px; 
} 

bırak uzay itti göstergeler karışmaz böylece kaydırıcının altındaki içerikle ..

.carousel-inner { 
    margin-bottom:50px; 
} 

Bootply Demo

Answer 2

Sen ile yazabilirsiniz:

.carousel-indicators { 
    display:none; 
} 

Answer 3

öğe sınıf div özelleştirme

<div class="item"> 
    <div class="col-mid-1"> &nbsp; </div> 
     <div class="col-md-10"> your content </div> 
      <!-- Note total should not be greater than 12 that is 1 + 10 + 1 = 12--> 
      <div class="col-mid-1"> &nbsp; </div> 
</div> 

i içerik div

simgeleri istemediğinizde bu benim için çalıştı

Answer 4

Gösterge sınıfından sonra gizlenen bootstrap sınıfını aşağıdaki gibi ekleyebilirsiniz:

<ol class="carousel-indicators hidden"> 
<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> 

Answer 5

Böyle 0px sınırını ayarlayabilirsiniz:

.carousel-indicators li{ 
    border: 0px; 
}