如何創建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'});

我確實認為應該這樣做。

Answer 2

我有一個可以獲得保證金的情況，但它必須在所有行上保持一致。

您可以通過在列表的開頭添加空白<li style="display:none"></li>來實現此目的。 這樣Bootstrap就會在未顯示的<li>上找到邊距去除。

有一個保證金可能是不可接受的，但我覺得這是一個優雅的解決方案，而無需將風格混合到js。

Answer 3

有同樣的問題，不干凈，但快速解決方法如下：

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