コンピュータディスプレイの2枚の写真を持つカルーセルを携帯で1枚にするにはどうすればいいですか？

Question

私はコンピュータのディスプレイで2つの画像を横に並んだカルーセルを作成したいが、モバイルビューでは1つの画像しか表示しない。この写真は、私がしたいことをコンピュータビューである：

しかし、それは絵2となったときに

モバイル

で、私はそれを1つずつ作成し、別の1表示を削除したいこと一つずつ。

以下はHTMLコードとCSSです。私もブートストラップを使用しています。

<div class="row"> 
    <div class="col-md-2"></div> 
    <div class="col-md-8"> 
     <div id="Carousel" class="carousel slide"> 

      <ol class="carousel-indicators"> 
       <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
       <li data-target="#Carousel" data-slide-to="1"></li> 
      </ol> 

      <!-- Carousel items --> 
      <div class="carousel-inner"> 

       <div class="item active"> 
        <div class="row"> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" alt="Image" style="max-width:100%;"></a></div> 
        </div><!--.row--> 
       </div><!--.item--> 

       <div class="item"> 
        <div class="row"> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div> 
         <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a></div> 
        </div><!--.row--> 
       </div><!--.item--> 

      </div><!--.carousel-inner--> 

      <a data-slide="prev" href="#Carousel" class="left carousel-control black-link">‹</a> 
      <a data-slide="next" href="#Carousel" class="right carousel-control black-link">›</a> 

     </div><!--.Carousel--> 

    </div> <!--.col-md-8--> 
</div><!--.row--> 

CSS：

.carousel { 
    margin-bottom: 0; 
    padding: 0 40px 30px 40px; 
} 
/* The controlsy */ 
.carousel-control { 
    left: -30px; 
    height: 0px; 
    width: 0px; 
    font-size: 153px; 
    background: none repeat scroll 0 0 #000000; 
    border: none; 
    border-radius: 20px 20px 20px 20px; 
    margin-top: 0px; 
} 
.carousel-control.right { 
    right: -12px; 
} 
.carousel-control.left { 
    left: -62px; 
} 
/* The indicators */ 
.carousel-indicators { 
    right: 50%; 
    top: auto; 
    bottom: -10px; 
    margin-right: -19px; 
} 
/* The colour of the indicators */ 
.carousel-indicators li { 
    background: #ffffff; 
} 
.carousel-indicators .active { 
    background: #1b365d; 
} 

あなたの助けを本当に感謝しています。

Answer 1

この問題を解決する方法はたくさんあります。個人的には、2つの全く異なるカルーセルを使用し、私が標準のブートストラップクラスでは使用していないカルーセルを隠すことになります。

たとえば

：私はこのようにそれを行うだろう

<div class='row'> 
    <!-- Large Carousel --> 
    <div class="hidden-xs"> 
      ... your carousel two picture version 
    </div> 
    <!-- Small Carousel --> 
    <div class="visible-xs"> 
      ... your carousel one picture 
    </div> 
</div> 

理由は、それはあなたにどのように二つの異なるカルーセル表示で最も制御を与えることです。 2つの画像の問題を修正し、他のスタイリングの問題を簡単に調整することができます。しかし、より多くのコード行につながります。

また、同じクラスを使用して単一のカルーセル内で実行することもできます。あなたの上記の例から：

<!-- Carousel items --> 
<div class="carousel-inner"> 

    <div class="item active"> 
     <div class="row"> 
      <div class="hidden-xs"> 
       <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a></div> 
       <div class="col-md-6"><a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" style="max-width:100%;"></a> 
      </div> 

      <div class='visible-xs'> 
       <div class="col-xs-12"> 
        <a href="https://a2ua.com/picture/picture-002.jpg" target="_blank" class="thumbnail"><img src="https://a2ua.com/picture/picture-002.jpg" class="img-responsive" alt="Image" alt="Image" style="max-width:100%;"></a> 
       </div> 
      </div> 

     </div><!--.row--> 
    </div><!--.item--> 

</div><!--.carousel-inner-->