Исправление загрузочного бутстрапа на вложенных столбцах

Bootstrap 3 применяет 15px левое и правое дополнение к столбцам.

Это вызывает у меня проблемы, потому что в моем макете много вложенных столбцов:

<div class="col-md-6"></div>
<div class="col-md-6"></div>
<div class="col-md-12">
    <div class="col-md-6">
        <div class="col-md-12"></div>
        <div class="col-md-12"></div>
    </div>
    <div class="col-md-6"></div>
</div>

Смотрите Fiddle.

Мне не нужно просто удалять заполнение, потому что мне нужно разделение между элементами.

Результат, который я получил после, визуально, таков: http://jsfiddle.net/Aeup8/8/

Мой первый подход заключался в том, чтобы установить:

[class^='col-'] {
    padding:0;
}
[class^='col-'] + [class^='col-'] {
    padding-left: 15px;
}

Однако это не приведет к исправлению столбцов, которые переносятся во вторую строку.

Смотрите скрипт

В моем втором подходе использовался JavaScript:

(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);

Смотрите скрипт

Но у него есть проблемы:

• Он не пересекает DOM в желаемом порядке, поэтому он не будет хорошо встраивать.
• Я даже не хочу это исправлять, потому что кажется, что это очень плохое решение (это произойдет каждый раз при изменении размера видового экрана)

Что мне делать?

Ответы

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12"></div>
                    <div class="col-md-12"></div>
                </div>
            </div>
            <div class="col-md-6"></div>
        </div>
    </div>
</div>

// Row
//
// Rows contain and clear the floats of your columns.

.row {
  .make-row();
}

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  margin-left:  (@gutter / -2);
  margin-right: (@gutter / -2);
  &:extend(.clearfix all);
}

.row  .row {
    margin: 0px -15px;
}

<div class="col-md-6 mmLR15"></div>
<div class="col-md-6 mM15"></div>
<div class="col-md-12 mM15">
    <div class="row">
      <div class="col-md-6 mmR15">
        <div class="col-md-12 mm15"></div>
        <div class="col-md-12 mm15"></div>
      </div><!-- col-md-6 -->
      <div class="col-md-6 mmL15"></div>
    </div><!-- row -->
</div><!-- col-md-12 -->

.mmLR15 {
  margin: 0px -15px;
}
.mmR15 {
  margin-right: -15px;
}
.mmL15 {
  margin-left: -15px;
}