JSFiddle - React, Tailwind, and code Playground

by jestho

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<div class="container-fluid">

    <h2>Borked</h2>
    <div class="row-fluid">
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
    </div>
    
    <h2>Fixed</h2>
    <div class="row-fluid fixed">
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
        <div class="span4">Span4</div>
    </div>
    
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css');

.row-fluid div {
    background: #eee;
    margin-bottom: 10px;
}

.row-fluid.fixed .span12 + li,
.row-fluid.fixed .span6:nth-child(2n + 1),
.row-fluid.fixed .span4:nth-child(3n + 1),
.row-fluid.fixed .span3:nth-child(4n + 1),
.row-fluid.fixed .span2:nth-child(6n + 1) { margin-left: 0; }