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,因此不会很好地处理嵌套。
- 我什至不想修复它,因为这似乎是一个非常糟糕的解决方案(每次视口(viewport)大小更改时都会发生这种情况)
我该怎么办?
最佳答案
您可以在 nesting columns 时抵消重复的填充通过将每一层包装在它自己的 .row
中:
<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>
两个主要列之间的间隙将保留,但嵌套不会继续进一步缩进:http://jsfiddle.net/5uqmE/ .
They currently accomplish this通过 apply a negative margin
与外部 padding
相对的:
// 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);
}
关于javascript - 修复嵌套列上的 Bootstrap 填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22748673/