javascript - 如何创建 Bootstrap 缩略图网格

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>

---

结果如下:

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

更新需要IE8解决方案

Answer 1

假设使用 :nth-child(4n) 的 LI 父级的宽度不会改变，应该可以定位 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'});

我相信这应该可以解决问题。