Question

我要显示未知数量的拇指，这是HTML渲染的示例：

<div class="row-fluid">
        <ul class="thumbnails">
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li><li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
          <li class="span3">
            <a href="#" class="thumbnail">
              <img data-src="holder.js/260x180" alt="260x180" style="width: 260px; height: 180px;" src="mySrc">
            </a>
          </li>
        </ul>
      </div>

结果如下： screen shot

问题：由于我动态构建了UI，如何避免第二行的边距而不创建另一个<div class="row-fluid">

更新需要IE8解决方案

Answer 1

假设LI的父级宽度不会改变，使用：nth-child（4n）应该能够定位x元素。

.row-fluid li:nth-child(4n) {
    margin: 10px;
    padding: 0;
 }

有关如何为以下代码编写公式的详细信息，请参阅spec：nth-child（）。

非常基本Fiddle显示它正常工作。

<强>更新

使用IE8只需使用jQuery（假设你正在使用它）

$('.row-fluid li:nth-child(4n)').css({'margin':'10px'});

我相信应该这样做。

Answer 2

我有一个可以获得保证金的情况，但它必须在所有行上保持一致。

您可以通过在列表的开头添加空白<li style="display:none"></li>来实现此目的。这样Bootstrap就会在未显示的<li>上找到边距去除。

有一个保证金可能是不可接受的，但我觉得这是一个优雅的解决方案，无需将风格混合到js。

Answer 3

有同样的问题，不干净，但快速解决方法如下：

.row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}

如何创建Bootstrap缩略图网格

3 个答案: