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>
Мне не нужно просто удалять заполнение, потому что мне нужно разделение между элементами.
Результат, который я получил после, визуально, таков: 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 в желаемом порядке, поэтому он не будет хорошо встраивать.
- Я даже не хочу это исправлять, потому что кажется, что это очень плохое решение (это произойдет каждый раз при изменении размера видового экрана)
Что мне делать?