How to create a Bootstrap thumbnails grid

Question

I have an unknown number of thumbs to display, here is an example of the HTML rendered:

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

---

Here is the result:

Question : Since I build the UI dynamically, how can I avoid the margin on the second row without creating another <div class="row-fluid">

Update IE8 solution is required

Answer 1

Assuming the width won't change of the LI's parent using :nth-child(4n) should work to target the x element.

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

See the spec for details on how to write formulas for :nth-child().

A very very basic Fiddle displaying it working.

Update

To work with IE8 just use jQuery (assuming you're using it)

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

I do believe that should do the trick.