twitter-bootstrap 从 Bootstrap 4 中的网格列中删除填充装订线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36413660/
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
Removing padding gutter from grid columns in Bootstrap 4
提问by Blair Anderson
How do you create a gutterless grid in bootstrap 4?
你如何在 bootstrap 4 中创建一个无槽的网格？
Is there an official API for removing the gutter or is it manual?
是否有用于删除装订线的官方 API 还是手动的？
回答by Blair Anderson
Bootstrap4:Comes with .no-guttersout of the box.
source: https://github.com/twbs/bootstrap/pull/21211/files
Bootstrap4：自带.no-gutters开箱。来源：https: //github.com/twbs/bootstrap/pull/21211/files
Bootstrap3:
引导程序3：
Requires custom CSS.
需要自定义 CSS。
Stylesheet:
样式表：
.row.no-gutters {
margin-right: 0;
margin-left: 0;
& > [class^="col-"],
& > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}
}
Then to use:
然后使用：
<div class="row no-gutters">
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
<div class="col-xs-4">...</div>
</div>
It will:
它会：
- Remove margin from the row
- Remove padding from all columns directly beneath the row
- 从行中删除边距
- 从行正下方的所有列中删除填充
回答by sheetal
You should use built-in bootstrap4 spacing classesfor customizing the spacing of elements, that's more convenient method .
您应该使用内置的 bootstrap4 间距类来自定义元素的间距，这是更方便的方法。
回答by Iqtidar Ali
Need an edge-to-edge design? Drop the parent
.containeror.container-fluid.
需要无边框设计？删除父级
.container或.container-fluid.
Still if you need to remove padding from .rowand immediate child columns you have to add the class .no-gutterswith the code from @Brian above to your own CSS file, actually it's Not 'right out of the box', check here for official details on the final Bootstrap 4 release: https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
尽管如此，如果您需要从.row直接子列中删除填充，您必须将.no-gutters带有上面@Brian 代码的类添加到您自己的 CSS 文件中，实际上它不是“开箱即用”，请在此处查看有关最终版本的官方详细信息Bootstrap 4 发布：https: //getbootstrap.com/docs/4.0/layout/grid/#no-gutters
回答by canil
You can use this css code to get gutterless grid in bootstrap.
您可以使用此 css 代码在引导程序中获得无槽网格。
.no-gutter.row,
.no-gutter.container,
.no-gutter.container-fluid{
margin-left: 0;
margin-right: 0;
}
.no-gutter>[class^="col-"]{
padding-left: 0;
padding-right: 0;
}
回答by roNn23
You can use the mixin make-col-readyand set the gutter width to zero:
您可以使用 mixinmake-col-ready并将装订线宽度设置为零：
@include make-col-ready(0);
@include make-col-ready(0);
