ブートストラップカルーセルで3枚の画像を並べて配置して中央に配置する

Question

私はブートストラップカルーセルを作ろうとしています。しかし、私はスライドの1つをdivの中にラップされたお互いに隣に座る3つの画像で構成しようとしています。

ショーの他のスライドはすべて中央に配置され、十分に見栄えがよいですが、divにラップされた3つのimgからなるスライドは、私に言わなかったとしてもページの左側に浮いています。

コードを追加します。

カルーセル

<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 +ブートストラップはまた、私は、任意のカスタムJavaScriptを使用していないよ、このページ

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

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



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

で使用されています。

私はちょうど1つのスライドを他のように中心にする方法を理解するように思える。

Answer 1

技術的にカルーセルに何かを置くことができます。単一のイメージである必要はないので、ブートストラップカラムを使用するだけで済みます。例えば

：

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