JSFiddle - React, Tailwind, and code Playground

by Pongstr

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div class="row-fluid">
    <h1>2 Column Thumbnails</h1>
    <hr />
  <ul class="thumbnails"> 
      <li class="span6">
          <div class="thumbnail">
            <img src="http://placehold.it/200x200" alt="Thumbnail" />
            <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>  
          </div>
      </li>
      <li class="span6">
          <div class="thumbnail">
            <img src="http://placehold.it/200x200" alt="Thumbnail" />
            <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>  
          </div>
      </li>
      <li class="span6">
          <div class="thumbnail">
            <img src="http://placehold.it/200x200" alt="Thumbnail" />
            <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>  
          </div>
      </li>
      <li class="span6">
          <div class="thumbnail">
            <img src="http://placehold.it/200x200" alt="Thumbnail" />
            <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small>  
          </div>
      </li>

  </ul>  
</div>

<div class="row-fluid">
    <h1>3 Column Thumbnails</h1>
    <hr />
    <ul class="thumbnails">
        <li class="span4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="Thumbnail" />
                <small>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</small><br />
                <button class="btn btn-small btn-primary">Button</button>
                <button class="btn btn-small btn-secondary">Button</button>
            </div>
        </li>
        <li class="span4">
            <div class="thumbnail">
                <img src="http://placehold.it/200x200" alt="Thumbnail" />
                <small>Lorem ipsum dolor sit amet,...

CSS

/* for presentation only */
body { margin: 0; padding: 20px; }
body img { width: 100%; height: auto; }

/**
 * Thumbnails Fix 
 * but apparently, this doesn't work on IE6-IE8
 * so we'll need some help from jquery
 *
 */
.thumbnails > li.span2:nth-child(6n+1),
.thumbnails > li.span3:nth-child(4n+1),
.thumbnails > li.span4:nth-child(3n+1),
.thumbnails > li.span6:nth-child(2n+3){ margin-left: 0 !important; }

JavaScript

$(window).load(function(){
    
  
  if ( $('.lt-ie9 .thumbnails', '.lt-ie8 .thumbnails').length > 0 ) {      
    // Don't break function
    function dontBreak( column ){
      var ie7 = '.lt-ie8' + ' .thumbnails > ' + column,
          ie8 = '.lt-ie9' + ' .thumbnails > ' + column;        
      $( ie7, ie8 ).css({ 'margin-left' : '0' });
    }
      
    // Don't break .span2 
    dontBreak('.span2:nth-child(6n+1)');
    // Don't break .span3 
    dontBreak('.span3:nth-child(4n+1)');
    // Don't break .span4 
    dontBreak('.span4:nth-child(3n+1)');
    // Don't break .span26
    dontBreak('.span6:nth-child(2n+3)');
      
  }
    
});