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;
 }

有关如何为 :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;
}