ブートストラップ・グリッド・システムで、異なる画像が混在して表示される。

Question

ブートストラップ・グリッド・システム。 添付の画像を確認してください。毎回異なるサイズの画像をモバイルサイズとして使用すると、2行ではなく3行が表示されます。どうすればこの問題を解決できますか？

<div id="page-ad"> 
    <div class="container"> 
     <hr> 
     <div class="row"> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
      <img src="<?php echo $ad_img01[url]; ?>" alt="..."> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
      <img src="<?php echo $ad_img02[url]; ?>" alt="..."> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
      <img src="<?php echo $ad_img03[url]; ?>" alt="..."> 
      </a> 
     </div> 
     <div class="col-xs-6 col-md-3"> 
      <a href="#" class="thumbnail"> 
      <img src="<?php echo $ad_img04[url]; ?>" alt="..."> 
      </a> 
     </div> 
    </div> 
    </div> 
</div> 

different images、 same images

Answer 1

二コルのdiv

http://getbootstrap.com/css/#grid-responsive-resets

<div class="row"> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
     <img src="<?php echo $ad_img01[url]; ?>" alt="..."> 
     </a> 
    </div> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
     <img src="<?php echo $ad_img02[url]; ?>" alt="..."> 
     </a> 
    </div> 

    <!-- here --> 
    <div class="clearfix visible-xs-block"></div> 
    <!-- --> 

    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
     <img src="<?php echo $ad_img03[url]; ?>" alt="..."> 
     </a> 
    </div> 
    <div class="col-xs-6 col-md-3"> 
     <a href="#" class="thumbnail"> 
     <img src="<?php echo $ad_img04[url]; ?>" alt="..."> 
     </a> 
    </div> 
</div> 

後にブートストラップclearfixを使用してみてください