如何创建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

假设宽度不会改变LI的父级使用:nth-​​child(4n)应该用于定位x元素.

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

有关如何编写公式的详细信息,请参阅规范:nth-​​child().

一个非常非常基本的小提琴显示它工作.

更新

要使用IE8,只需使用jQuery(假设您正在使用它)

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

我确实认为应该这样做.