Bootstrap 中缩略图的边距问题答案

【问题标题】：Margin problems with thumbnails in BootstrapBootstrap 中缩略图的边距问题
【发布时间】：2013-03-22 17:29:30
【问题描述】：

我正在这样做：

<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 个项目时，缩略图就会因第二行的左边距而错位..

查看图片：

【问题讨论】：

我猜是margin-left。您可以改用margin-right。请提供您的 css 代码，甚至更好，创建一个 jsfiddle.net

标签： css twitter-bootstrap margins

【解决方案1】：

我猜引导程序会为所有元素添加左边距，但第一个元素除外。您可以添加这样的样式：

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

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

您可以这样做的另一种方法是在您的 php 循环中的每四个 li 中添加一个类（将其称为 .noLeftMargin，并相应地设置 css。

【讨论】：

当然，请务必选择此答案作为最适合您的答案！
是的，它不会让我直接之后

【解决方案2】：

删除 .thumbnails 之前的行 div，您将不需要额外的 css。

【讨论】：

【解决方案3】：

您也可以查看 Bootstrap 的有关重置的文档。

Bootstrap.com > CSS > 网格 > 响应列重置

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

大部分时间都可以通过 Bootstrap 的 .clearfix 类解决

【讨论】：