Question

Bootstrap网格系统，带有混合显示，附有不同的图像。请查看附图。每次如果我使用显示为移动大小的不同图像，它会显示三行而不是两行。我该如何解决这个问题？

<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

尝试在第二个col div之后使用Bootstrap clearfix

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>

Bootstrap网格系统，带有混合显示，附有不同的图像

1 个答案: