Making 3 Bilder sitzen nebeneinander im Bootstrap Karussell und zentriert

Question

Ich versuche, ein Bootstrap-Karussell zu machen. Allerdings versuche ich, dass eine der Folien aus 3 Bildern besteht, die nebeneinander in einem div liegen.

Alle anderen Folien in der Show sind zentriert und sehen gut aus, aber die Folie, die aus 3 img in einem div eingewickelt ist, schwebt immer links von der Seite, obwohl ich es ihnen nicht gesagt habe.

Ich werde Code enthalten.

Karussell

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    <li data-target="#myCarousel" data-slide-to="3"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img src="images/jumbotron.jpg" alt="cd release promo"> 
    </div> 

    <div class="item"> 
     <img src="images/Coldclock Knockout Local 662 (10).jpg" alt="Robby and Ryan in blue"> 
    </div> 


    <!-- Div containing 3 images --> 
    <div id="ryanSlide" class="item"> 
     <div id="ryanSlideContainer"> 
     <img src="images/Coldclock Knockout Local 662 (38).jpg" alt="Ryan 1"> 
     <img src="images/Coldclock Knockout Local 662 (46).jpg" alt="Ryan 2 B&W"> 
     <img src="images/Coldclock Knockout Local 662 (47).jpg" alt="Ryan 3"> 
     </div> 
    </div> 

    <div class="item"> 
     <img src="images/Coldclock Knockout Local 662 (48).jpg" alt="Crowd Shot"> 
    </div> 
    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
    </div> 

CSS + Bootstrap ist auch

body { 
    background-color: black; 
} 



/*================================================================================================ 

NAVIGATION 

================================================================================================*/ 



.active { 
    border-bottom: 1px solid red; 
} 
.navbar-inverse .navbar-nav > .active > a{ 
    font-size: 1.25em; 
} 

#navigation { 
    margin-bottom: 0px; 
    border-radius: 0px; 
} 



/*================================================================================================ 

JUMBOTRON 

================================================================================================*/ 


#myCarousel img { 
    height: 500px; 
    margin: 0 auto; 
} 

#ryanSlide { 
    margin: 0 auto; 
    width: 100%; 
} 

#ryanSlideContainer { 
    margin: 0 auto; 
} 

#ryanSlide img { 
    margin: 0 auto; 
} 

/*================================================================================================ 



================================================================================================*/ 

mit Ich bin keine benutzerdefinierten Javascript auf dieser Seite verwendet werden.

Ich kann einfach nicht herausfinden, wie man die eine Folie zu zentrieren sich wie die anderen.

Answer 1

Sie können alles technisch in ein Karussell einfügen, es muss nicht nur ein einzelnes Bild sein, also können Sie einfach Bootstrap-Spalten verwenden.

Zum Beispiel:

<div id="ryanSlide" class="item"> 
    <div class="col-md-4"> 
     <img src="" class="img-responsive center-block" alt=""/> 
    </div> 
    <div class="col-md-4"> 
     <img src="" class="img-responsive center-block" alt=""/> 
    </div> 
    <div class="col-md-4"> 
     <img src="" class="img-responsive center-block" alt=""/> 
    </div> 
</div>