JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.min.css">
<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-responsive.min.css">
<div class="container">

<!--
    Solution 1 (not responsive)
    Can work with one or several spans
 -->
<div class="row">
    <div class="span3">
        <div class="inner">span3</div>
    </div>
    <div class="span6">
        <div class="inner">span6</div>
    </div>
    <div class="span3">
        <div class="inner">span3</div>
    </div>
</div>
    
</div>

<div class="container">
    
<!--
    Solution 2 (responsive proof - maybe)
    fluid % mostly
 -->
    
    <div class="row-fluid">
        <div class="inner-fluid clearfix">
            <div class="span3">span3</div>
            <div class="span6">span6<br />Slightly more correct in terms of proportionality (click to see)</div>
            <div class="span3">span3</div>
        </div>
    </div>
    
</div>


<div class="container css3">
    
<!--
    Solution 3 (css3)
 -->
    
    <div class="row">
            <div class="span3">span3</div>
            <div class="span6">span6</div>
            <div class="span3">span3</div>
    </div>
    
</div>

CSS

/**
 * Solution 1 (not responsive)
 * Any width for borders is ok.
 * May be able to optimize by setting global style and
 * `border-style`'ing to none (see Solution 2 for example)
 */

.row > [class*="span"]:first-child > .inner {
    border-left: 5px solid red;
}
.row > [class*="span"]:last-child > .inner {
    border-right: 5px solid red;
}

/**
 * Solution 2 (responsive proof - maybe)
 * fluid % mostly
 */

.row-fluid > .inner-fluid {
    border: 5px none green;
    border-left-style: solid;
    border-right-style: solid;
}

/**
 * Solution 3 (css3)
 */

.css3  [class*="span"] {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.css3  .row > [class*="span"]:first-child {
    border-left: 5px solid orange;
}
.css3  .row > [class*="span"]:last-child {
    border-right: 5px solid orange;
}

/* Testing purposes */

body { margin-top: 20px; }
.container { background-color: yellow;margin-top: 10px; }
.container.unpadded { margin-top: 0px; }
.row > [class*="span"] > .inner,
.row-fluid [class*="span"],
.css3  [class*="span"] { background-color: blue;color: white;text-align: center; }

.inner,
.inner-fluid > [class*="span"],
.css3  [class*="span"] { min-height: 50px;padding: 20px; }

JavaScript

$(document).click(function() {
    $('.container').toggleClass('unpadded');
});