title: Fix Bootstrap Padding On Nested Columns
body: <p>Bootstrap 3 applies a 15px left and right padding on columns.</p>
  
  <p>This is causing me trouble because my layout has a lot of nested columns:</p>
  
  <pre><code>&lt;div class="col-md-6"&gt;&lt;/div&gt;
  &lt;div class="col-md-6"&gt;&lt;/div&gt;
  &lt;div class="col-md-12"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="col-md-12"&gt;&lt;/div&gt;
          &lt;div class="col-md-12"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Aeup8/1/">See Fiddle</a>.</p>
  
  <p>I don't need to just remove the padding because I need the separation between the elements.</p>
  
  <p>The result I'm after, visually, is this: <a href="http://jsfiddle.net/Aeup8/8/">http://jsfiddle.net/Aeup8/8/</a></p>
  
  <p>My first approach was to set:</p>
  
  <pre><code>[class^='col-'] {
      padding:0;
  }
  [class^='col-'] + [class^='col-'] {
      padding-left: 15px;
  }
  </code></pre>
  
  <p>However, this will not fix columns that wrap onto a second row.</p>
  
  <p><a href="http://jsfiddle.net/Aeup8/2/">See Fiddle</a></p>
  
  <p>My second approach was using JavaScript: </p>
  
  <pre><code>(function($) {
      var $els = $('[class^="col-"');
      //console.log($els);
      var cols = {};
      $els.each(function(i, col) {
          var classes = $(col).attr('class').split(' ');
  
          classes.forEach(function(str) {
              var match = str.match(/col-(\w+)-(\d+)/);
              if ( match ) {
                  //console.log($els.eq(i));
                  cols[match[1]] = cols[match[1]] || {};
                  var current = cols[match[1]];
  
                  if ( match[2] == 12 ) {
                      current.ids = [];
                      current.sum = 0;
  
                      $els.eq(i).css({ padding: 0 });
                      return
                  }
  
                  current.ids = current.ids || [];
                  current.sum = current.sum || 0;
                  current.sum += ( +match[2] );
                  current.ids.push(i);
                  if (current.sum == 12) {
                      //console.log(current);
                      current.ids.forEach(function(id) {
                          $els.eq(id).css({ 'padding': 0, 'padding-right': '15px' });
                          if (id == i) $els.eq(id).css({ 'padding': 0, 'padding-left': '15px' });
                      });
                      current.ids = [];
                      current.sum = 0;
                  }
              }
          });
      });
  })(jQuery);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/Aeup8/4/">See Fiddle</a></p>
  
  <p>But it has problems: </p>
  
  <ul>
  <li>It does not traverse the DOM in the desired order, so it won't do nested ones well.</li>
  <li>I don't even want to fix that because it seems like this is a very bad solution (it would happen every time the viewport size changes)</li>
  </ul>
  
  <p>What do I do?</p>