Bootstrap 3 Standard-Karussell: Wie man Indikatoren nach unten und außerhalb des Objektträger-Containers bewegt?

Question

Was ist eine einfache (und saubere) Möglichkeit, um die Karussellindikatoren des Bootstrap 3 nach unten und außerhalb des Objektträgerbehälters zu verschieben, damit sie nicht auf den Fotos überlagert werden? Siehe Bild unten, wo ich die Indikatoren verschieben möchte.

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

Sie sie unter dem Schieberegler wie folgt schieben kann ...

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

Leave Raum unter dem Karussell, so dass die geschoben Indikatoren nicht stören mit Inhalt unter dem Schieberegler.

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

Bootply Demo

Answer 2

Sie können mit schreiben:

.carousel-indicators { 
    display:none; 
} 

Answer 3

Passen Sie Ihre Artikel Klasse div

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

dies für mich gearbeitet, wenn ich

nicht die Symbole auf den Inhalt div wollen

Answer 4

Sie können einfach die Bootstrap-Klasse hinzufügen, die nach der Indikator-Klasse wie folgt versteckt ist:

<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

Sie können Grenze zu 0px wie folgt festgelegt:

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