2016-04-29 10 views
2

スタックブートストラップカルーセルに並んで2枚の画像側

1)ブートストラップ、カルーセル

2の側面によるスタック2枚の画像側)私は2を表示したいですデスクトップビューでは画像を並べて表示し、モバイルビューでは1つの画像のみを表示します。

は、ここに私のbootplyです:http://www.bootply.com/6UtgjHqm8f

は私が助け

.carousel-inner .item img { 
    display: inline-block; 
} 

を追加しましたが、私のアライメントがオフになっています。最初の画像は左に進み、左のナビゲーションを群集します。ここで

は私のHTMLです:

<div class="content-section-b"> 

    <div class="container"> 

     <div class="row"> 
      <div class="col-lg-12"> 
       <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> 
        </ol> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner" role="listbox"> 
        <div class="item active"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/apples_01.png" alt="Apples"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/oranges_01.png" alt="Oranges"> 
        </div> 
        <div class="item"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/pears_01.png" alt="Pears"> 
         <img class="img-responsive" src="http://www.onvia.com/responsive/mangos_01.png" alt="Mangos"> 
        </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next"> 
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
        <span class="sr-only">Next</span> 
        </a> 
       </div> 
      </div> 
     </div> 

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

</div> 
<!-- /.content-section-b --> 

ここに私のCSSです:

.content-section-b { 
    padding: 50px 0; 
    background-color: #3C5A78; 
} 

.carousel-control.left { 
    background-image:none; 
} 

.carousel-control.right { 
    background-image:none; 
} 

答えて

2

問題は、IMG]タブで、あなたの画像のCSSプロパティを使用inline-blockであり、すべてのものは

bootply Demo

OKになります
関連する問題