如何创建 Bootstrap 缩略图网格答案

【问题标题】：How to create a Bootstrap thumbnails grid如何创建 Bootstrap 缩略图网格
【发布时间】：2013-02-18 19:06:36
【问题描述】：

我有一个未知数量的拇指要显示，这里是一个 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解决方案

【问题讨论】：

每行的项数会改变吗？
可以改变，基本上是一行未知数的拇指
....
是的，但我的想法是，假设其父项的宽度不会改变，您将始终以第 5 个 li 开头？
这已经远远落后于你，但我只想将边距的位置更改为另一侧，即右侧而不是左侧。认为当缩略图出现在页面上时，它应该说“无论其他人下一个来的人离我这么远”，即使没有其他人出现，这也总是可以的，而不是说“当我到达这里时，我离这里的任何人都这么远”正如你的问题所示，如果它是第一个周围的人，这可能不适用。你也可以通过这种方式获得一致的列对齐方式（对不起，我认为这是类比）

标签： javascript css layout twitter-bootstrap web

【解决方案1】：

假设使用 :nth-child(4n) 的 LI 的父级的宽度不会改变，应该可以针对 x 元素。

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

有关如何为 :nth-child() 编写公式的详细信息，请参阅spec。

一个非常基本的Fiddle 显示它正在工作。

更新

要使用 IE8，只需使用 jQuery（假设您正在使用它）

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

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

【讨论】：

我很抱歉，我应该声明我也需要一个 IE8 解决方案。如果没有其他解决方案会弹出，我会接受答案。感谢您的回复！
实际上我使用的是没有 JQ 的 angularJS ...但无论如何谢谢:)
脚本有效。我有相同的 css hack 公式，但它在 IE7,8 和 safari 中不起作用。

【解决方案2】：

我有一个案例，边距可以有，但它必须在所有行上保持一致。

您可以通过在列表开头添加一个空白<li style="display:none"></li> 来实现此目的。这样，Bootstrap 的目标是在未显示的 <li> 上移除边距。

留有余量可能是不可接受的，但我觉得这是一个优雅的解决方案，无需将样式混合到 js 中。

【讨论】：

【解决方案3】：

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

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

【讨论】：