twitter-bootstrap 修复嵌套列上的引导填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22748673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fix Bootstrap Padding On Nested Columns
提问by Alain Jacomet Forte
Bootstrap 3 applies a 15px left and right padding on columns.
Bootstrap 3 在列上应用 15px 左右填充。
This is causing me trouble because my layout has a lot of nested columns:
这给我带来了麻烦，因为我的布局有很多嵌套列：
<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>
见小提琴。
I don't need to just remove the padding because I need the separation between the elements.
我不需要只删除填充，因为我需要元素之间的分隔。
The result I'm after, visually, is this: http://jsfiddle.net/Aeup8/8/
我在视觉上追求的结果是：http: //jsfiddle.net/Aeup8/8/
My first approach was to set:
我的第一种方法是设置：
[class^='col-'] {
padding:0;
}
[class^='col-'] + [class^='col-'] {
padding-left: 15px;
}
However, this will not fix columns that wrap onto a second row.
但是，这不会修复换行到第二行的列。
My second approach was using JavaScript:
我的第二种方法是使用 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);
But it has problems:
但它有问题：
- It does not traverse the DOM in the desired order, so it won't do nested ones well.
- 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)
- 它不会以所需的顺序遍历 DOM，因此它不会很好地处理嵌套的。
- 我什至不想解决这个问题，因为这似乎是一个非常糟糕的解决方案（每次视口大小改变时都会发生）
What do I do?
我该怎么办？
回答by Jonathan Lonowski
You can counter the duplicated padding when nesting columnsby wrapping each layer in its own .row:
您可以在嵌套列时通过将每一层包装在自己的层中来抵消重复的填充.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>
The gap between the 2 primary columns will remain, but the nesting won't continue to indent further: http://jsfiddle.net/5uqmE/.
2 个主列之间的差距将保留，但嵌套不会继续进一步缩进：http: //jsfiddle.net/5uqmE/。
They currently accomplish thisby apply a negative marginthat opposes the outer padding:
他们目前通过应用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);
}
回答by Ken Wheeler
On your container
在你的容器上
.row .row {
margin: 0px -15px;
}
回答by Fayaz
One simple css based solution can be creating custom classes and applying them to col-* for clearing paddings on inner divs or where you do not want padding.
一个简单的基于 css 的解决方案可以是创建自定义类并将它们应用于 col-* 以清除内部 div 上的填充或您不需要填充的位置。
<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 -->
Now for mmLR15, mmR15, mmL15 is to clear the bootstrap columns padding where needed. Below have written classes declaration to help you understand my point clearly.
现在对于 mmLR15、mmR15、mmL15 是在需要的地方清除引导列填充。下面写了类声明，以帮助您清楚地理解我的观点。
.mmLR15 {
margin: 0px -15px;
}
.mmR15 {
margin-right: -15px;
}
.mmL15 {
margin-left: -15px;
}
This will only clear bootstrap classes on div you don't want. Have to include class where needed. You can create a separate file and include after bootstrap so your code is cleaner. mmR15 & mmL15 are only for div's in row as row clears left and right margin.
这只会清除您不想要的 div 上的引导程序类。必须在需要的地方包括课程。您可以创建一个单独的文件并在引导程序之后包含，这样您的代码就更干净了。mmR15 和 mmL15 仅用于行中的 div，因为行会清除左右边距。
For media break points where bootstrap makes columns 100% you can reset them depending upon ur need or should I say upon you layout. Hope this helps you.
对于引导程序使列 100% 的媒体断点，您可以根据您的需要或我应该根据您的布局来重置它们。希望这对你有帮助。
