twitter-bootstrap Bootstrap - 如何删除列之间的排水沟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21254889/
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
Bootstrap - How to remove the gutter between columns
提问by Friede Petr
How can I remove the 30px gutter between columns? But without setting margin-left:-30px?
如何删除列之间的 30px 装订线？但是没有设置margin-left:-30px？
<div class='container'>
<div class='row'>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
<div class='col-lg-1'></div>
</div>
</div>
回答by Zim
Update 2018
2018 年更新
Bootstrap 4now includes a .no-guttersclass that you can just add to the .row.
Bootstrap 4现在包含一个.no-gutters类，您可以将它添加到.row.
<div class="row no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 4: http://www.codeply.com/go/OBW3RK1ErD
引导程序 4：http: //www.codeply.com/go/OBW3RK1ErD
Bootstrap 3.4.0+gutters are created using padding, but they added a .row-no-guttersclass. See the documentation for Bootstrap 3.4and look for 'Remove gutters'.
Bootstrap 3.4.0+ 装订线是使用填充创建的，但他们添加了一个.row-no-gutters类。请参阅Bootstrap 3.4的文档并查找“删除装订线”。
HTML you can use:
您可以使用的 HTML：
<div class="row row-no-gutters">
<div class="col">x</div>
<div class="col">x</div>
<div class="col">x</div>
</div>
Bootstrap 3+, <= 3.3.9gutters are created using padding. You also must adjust the negative margin so that spacing around the outer columns is not affected.
Bootstrap 3+, <= 3.3.9装订线是使用填充创建的。您还必须调整负边距，以便不影响外列周围的间距。
.no-gutter {
margin-right: 0;
margin-left: 0;
}
.no-gutter > [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
Just add the no-gutterclass to the .row.
只需将no-gutter类添加到.row.
回答by Francis Booth
A better way to remove padding on the columns would be to add a .no-padclass to your .row:
删除列上的填充的更好方法是将.no-pad类添加到您的.row：
<div class="row no-pad">
...and then add this CSS.
...然后添加这个 CSS。
.row.no-pad {
margin-right:0;
margin-left:0;
}
.row.no-pad > [class*='col-'] {
padding-right:0;
padding-left:0;
}
It's a bad idea to look for first-and last-childitems as actually the .rowis meant to take care of those offsets at the viewport's right and left. With the above method all .col-*s remain identically styled, which is also much simpler when considering responsiveness, especially stacking at mobile sizes (try my demo below mdsize).
寻找first-和last-child项目是一个坏主意，因为实际上它.row是为了处理视口右侧和左侧的这些偏移量。使用上述方法，所有.col-*s 都保持相同的样式，这在考虑响应性时也简单得多，尤其是在移动尺寸下堆叠（试试我下面的演示md尺寸）。
The direct-descendant CSS selector >means that the .no-padwill only be applied to that .row's immediate child .cols, so you can have padding on subsequently nested column structures (or not) if you wish.
直接后代 CSS 选择器>意味着.no-pad将仅应用于其.row直接子.cols，因此如果您愿意，您可以在随后的嵌套列结构上填充（或不填充）。
Also using the attribute selector [class*='col-']means that each column needs no extra non-Bootstrap classes added.
同样使用属性选择器[class*='col-']意味着每列不需要添加额外的非 Bootstrap 类。
Here is a demo: http://www.bootply.com/Ae3xTyAW5D
这是一个演示：http: //www.bootply.com/Ae3xTyAW5D
回答by Maciej Gurban
Instead of applying fixes that are difficult to maintain, I suggest generating your own customized version of Bootstrap from the Customizerwhere you can set the gutter to size you want (or remove it totally, by setting it to 0).
取而代之的将是难以维持的话，建议产生自举的自己的定制版本修复定制，您可以设置排水沟你想要的大小（或者完全删除它，将其设置为0）。
回答by dyve
Bootstrap 3 introduced the .row-no-guttersclassin v3.4.0, which works exactly as advertised.
Bootstrap 3在 v3.4.0 中引入了这个.row-no-gutters类，它的工作原理和宣传的完全一样。
To remove the gutters from a row and its columns, just add this class to the <div>.
要从行及其列中删除装订线，只需将此类添加到<div>.
