Bootstrap中的缩略图的边距问题 [英] Margin problems with thumbnails in Bootstrap

问题描述

我这样做：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12 well">
    <div class="row-fluid">
      <ul class="thumbnails">
        <?php 
          for($i=0; $i<count($rows); $i+=1){ // EVERY ODD BOOK STARTING AT 0
        ?>
        <li class="span4">
          <div class="thumbnail">
            <img src="http://placehold.it/320x200" alt="ALT NAME">
            <div class="caption">
              <h3><?php echo $rows[$i]['Title']; ?></h3>
              <p>Seller: <?php echo $rows[$i]['FirstName'] . " " . $rows[$i]['LastName']; ?> </p>
              <p>Email: <?php echo $rows[$i]['Email']; ?></p>
              <p>Phone: <?php echo $rows[$i]['PhoneNumber']; ?></p>
              <p>Condition: <?php echo $rows[$i]['BookCondition']; ?></p>
              <p align="center"><a href="#" class="btn btn-primary btn-block">Open</a></p>
            </div>
          </div>
        </li> 
          <?php
        }
      ?>   
      </ul>
    </div>
</div>

，每当我有超过3个项目时，缩图会被看起来是左边距

and whenever I have more than 3 items, the thumbnails get misaligned by what looks to be a left margin on the second row..

查看图片：

推荐答案

我猜想bootstrap为所有元素添加一个左边距，除了第一个。您可以添加如下样式：

I would guess that the bootstrap adds a left margin to all elements, except for the first one. You could add a style like this:

ul.thumbnails li.span4:nth-child(3n + 4) {
  margin-left : 0px;
}

但是请注意，这与旧的ie浏览器不兼容...

But be aware that this is not compatible with older ie browsers...

另一种方式你可以做，是添加一个类到你的php循环中的每一个li（称为 .noLeftMargin ，并相应地设置css。

another way you could do it, is to add a class to every forth li in your php loop (call it something like .noLeftMargin, and set the css accordingly.

这篇关于Bootstrap中的缩略图的边距问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！