修复嵌套列上的Bootstrap填充

Bootstrap 3在列上应用15px左右填充。

这给我带来了麻烦，因为我的布局有很多嵌套列：

见小提琴 。

我不需要删除填充因为我需要元素之间的分离。

我在视觉上看到的结果是： 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，因此它不会很好地嵌套DOM。
• 我甚至不想解决这个问题，因为这似乎是一个非常糟糕的解决方案（每次视口大小改变时都会发生这种情况）

我该怎么办？

Answer 1

通过将每个图层包装在自己的.row可以在嵌套列时计算重复的填充：

2个主要列之间的差距将保留，但嵌套将不会继续进一步缩进： http ： //jsfiddle.net/5uqmE/ 。

他们目前通过应用与外部padding相反的负margin 来实现此目的 ：

 // 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); } 

Answer 2

在你的容器上

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

Answer 3

一个简单的基于CSS的解决方案可以创建自定义类并将它们应用于col- *以清除内部div上的填充或不需要填充的位置。

现在对于mmLR15，mmR15，mmL15将在需要时清除自举列填充。 下面有书面的课程声明，以帮助您清楚地理解我的观点。

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

这只会清除你不想要的div上的bootstrap类。 必须包括所需的课程。 您可以创建一个单独的文件并在bootstrap之后包含，以便您的代码更清晰。 mmR15和mmL15仅适用于div的行，因为行会清除左右边距。

对于介质断点，其中bootstrap使列100％，您可以根据您的需要重置它们，或者我应该说你的布局。 希望这对你有所帮助。