CSS 删除列之间的间距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40267056/
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
Remove spacing between cols
提问by hussain
I want to remove the space between multiple columns in the Bootstrap grid.
我想删除 Bootstrap 网格中多列之间的空间。
How can we overwrite Bootstrap's CSS to achieve this task or any other better solution with pure CSS?
我们如何使用纯 CSS 覆盖 Bootstrap 的 CSS 来完成此任务或任何其他更好的解决方案？
main.html
主文件
<div class="row">
<div class="col-md-2">
// stuff here for this column
</div>
<div class="col-md-10">
// stuff here for columns
</div>
</div>
回答by Morteza Negahi
add a class when you need to remove spaces use it
当您需要删除空格时添加一个类使用它
.padding-0{
padding-right:0;
padding-left:0;
}
in html write this class
在html中编写这个类
<div class="row">
<div class="col-md-2 padding-0">
//stuff here for this column
</div>
<div class="col-md-10 padding-0">
//stuff here for columns
</div>
</div>
回答by Zim
In Bootstrap 4, the no-guttersclass is included. No extra CSS is needed...
在Bootstrap 4 中，no-gutters包含了该类。不需要额外的 CSS...
<div class="row no-gutters">
<div class="col-md-2">
// stuff here for this column
</div>
<div class="col-md-10">
// stuff here for columns
</div>
</div>
回答by vozaldi
In the Bootstrap 4 you can add class mx-*and px-*
在 Bootstrap 4 中，您可以添加类mx-*和px-*
<div class="row mx-0">
<div class="col-md-6 px-0">
<p>Your content</p>
</div>
<div class="col-md-6 px-0">
<p>Your content</p>
</div>
</div>
The classes of mx-*and px-*is in default bootstrap style, so you don't have to add it manually
的类别mx-*和px-*在缺省引导的风格，让您不必手动添加它
mx-*stand for margin-right: *plus margin-left: *. While px-*stands for padding right and left.
mx-*代表margin-right: *加号margin-left: *。Whilepx-*代表左右填充。
There is also my-* m-* mt-* mb-* mr-* ml-*and py-* p-* pt-* pb-* pr-* pl-*.
还有my-* m-* mt-* mb-* mr-* ml-*和py-* p-* pt-* pb-* pr-* pl-*。
回答by andreas
You can create a class no-gutterfor your rowand remove the margin/padding that's added by bootstrap, like suggested in this post:
您可以no-gutter为您创建一个类row并删除由引导程序添加的边距/填充，如这篇文章中的建议：
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
.row > div {
background: lightgrey;
border: 1px solid;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutter">
<div class="col-md-2">
1
</div>
<div class="col-md-10">
2
</div>
</div>I've set a gray background and a border for demonstration purposes. Watch the result in fullscreen to see, that there is no space anymore between the columns. More information about the predefined margin and padding in Bootstrap can be found here.
出于演示目的，我设置了灰色背景和边框。以全屏方式观看结果以查看列之间不再有空间。可以在此处找到有关Bootstrap 中预定义边距和填充的更多信息。
回答by Ginger Squirrel
On the columns there is a 15px padding on either side, if you remove that they should sit together.
在列的两边都有一个 15px 的填充，如果你删除它们应该坐在一起。
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
padding-right: 0px;
padding-left: 0px;
}
This snippet is from modifed code found in grid-framework.less.
此代码段来自 grid-framework.less 中的修改代码。
回答by Lütfü Can KAPLAN
Simple add .no-gutter on row.
简单地在行上添加 .no-gutter。
回答by David Wilkinson
I would add a class to the row and target the column children with a descendant wildcard selector:
我会向行添加一个类，并使用后代通配符选择器定位列子项：
HTML:
HTML：
<div class="row nopadding">
<div class="col-md-2">
//stuff here for this column
</div>
<div class="col-md-10">
//stuff here for columns
</div>
</div>
CSS:
CSS：
.nopadding > div[class^="col-"] {
padding-right: 0;
padding-left: 0;
}
回答by Andrew Birks
If you are using LESS you can use snippet and apply it to the row.
如果您使用的是 LESS，则可以使用代码段并将其应用于行。
.no-gutter {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
If normal CSS
如果普通的 CSS
.no-gutter > [class*="col-"]{
}
Like so:
像这样：
<div class="row no-gutter">
<div class="col-md-2">
//stuff here for this column
</div>
<div class="col-md-10">
//stuff here for columns
</div>
</div>
回答by Andrew Birks
The solution by Anshuman actually works! It gets rid of the bootstrap column spaces when you set the padding to zero in the styles, i.e padding: 0;
Anshuman 的解决方案确实有效！当您在样式中将填充设置为零时，它会摆脱引导列空间，即 padding: 0;
<div class = "row">
<div class = "col-sm-3" style= "padding:0;">
//html code here..
</div>
<div class = "col-sm-3" style= "padding:0;">
//html code here..
</div>
</div>
