5

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

4

3 回答 3

8

假设使用: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'});

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

于 2013-03-04T16:24:40.287 回答
3

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

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

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

于 2013-06-03T21:00:07.560 回答
0

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

.row {
   margin-left: 0px !important;
   margin-right: 0px !important;
}
于 2014-12-03T14:51:35.153 回答