Html 从 Bootstrap 3 中的列中删除填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19562903/
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 padding from columns in Bootstrap 3
提问by kexxcream
Problem:
问题：
Remove padding/margin to the right and left of col-md-* in Bootstrap 3.
删除 Bootstrap 3 中 col-md-* 左右两侧的填充/边距。
HTML code:
HTML代码：
<div class="col-md-12">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content" id="">
<div id='jqxWidget'>
<div style="clear:both;margin-bottom:20px;" id="listBoxA"></div>
<div style="clear:both;" id="listBoxB"></div>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
<div id="map_canvas" style="height: 362px;"></div>
</div>
</div>
</div>
</div>
Desired output:
期望的输出：
Currently this code adds padding/margin to the right and left of the two columns. I am wondering what it is I am missing in order to remove this extra space on the sides?
目前，此代码在两列的右侧和左侧添加了填充/边距。我想知道我缺少什么才能去除侧面的这个额外空间？
Notice:
注意：
If I remove "col-md-4" then both columns expand to 100% but I want them to be next to each other.
如果我删除“col-md-4”，那么两列都会扩展到 100%，但我希望它们彼此相邻。
回答by MackieeE
You'd normally use .rowto wrap two columns, not .col-md-12- that's a column encasing another column. Afterall, .rowdoesn't have the extra margins and padding that a col-md-12would bring and also discounts the space that a column would introduce with negative left & right margins.
您通常用于.row包装两列，而不是.col-md-12- 那是一列包裹另一列。毕竟，.row没有 acol-md-12会带来的额外边距和填充，并且还会以负的左右边距减少列引入的空间。
<div class="container">
<div class="row">
<h2>OntoExplorer<span style="color:#b92429">.</span></h2>
<div class="col-md-4 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Dimensions</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
<div class="col-md-8 nopadding">
<div class="widget">
<div class="widget-header">
<h3>Results</h3>
</div>
<div class="widget-content">
</div>
</div>
</div>
</div>
</div>
if you reallywanted to remove the padding/margins, add a class to filter out the margins/paddings for each child column.
如果您真的想删除填充/边距，请添加一个类来过滤每个子列的边距/填充。
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
回答by martinedwards
Bootstrap 4has added .no-guttersclass.
Bootstrap 4添加了.no-guttersclass。
Bootstrap 3: I always add this style to my Bootstrap LESS / SASS:
Bootstrap 3：我总是将此样式添加到我的 Bootstrap LESS / SASS 中：
.row-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Then in the HTML you can write:
然后在 HTML 中，您可以编写：
<div class="row row-no-padding">
If you want to only target the child columns you can use the child selector (Thanks John Wu).
如果您只想定位子列，您可以使用子选择器（感谢 John Wu）。
.row-no-padding > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
You may also want to remove padding only for certain device sizes (SASS example):
您可能还希望仅针对某些设备大小删除填充（SASS 示例）：
/* Small devices (tablets, 768px and up) */
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.row-sm-no-padding {
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
}
You can remove the max-width part of the media query if you want it to support small devices upwards.
如果您希望它向上支持小型设备，您可以删除媒体查询的 max-width 部分。
回答by phoeb
Reducing just the padding on the columns won't make the trick, as you will extend the width of the page, making it uneven with the rest of your page, say navbar. You need to equally reduce the negative margin on the row. Taking @martinedwards' LESS example:
仅减少列上的填充不会成功，因为您将扩展页面的宽度，使其与页面的其余部分不均匀，例如导航栏。您需要同样减少行上的负边距。以@martinedwards 的 LESS 为例：
.row-no-padding {
margin-left: 0;
margin-right: 0;
[class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
回答by Vitaliy Silin
Specifically for SASS mixin:
专门针对 SASS mixin：
@mixin no-padding($side) {
@if $side == 'all' {
.no-padding {
padding: 0 !important;
}
} @else {
.no-padding-#{$side} {
padding-#{$side}: 0 !important;
}
}
}
@include no-padding("left");
@include no-padding("right");
@include no-padding("top");
@include no-padding("bottom");
@include no-padding("all");
Then in HTML, you can use
然后在 HTML 中，您可以使用
.no-padding-left
.no-padding-right
.no-padding-bottom
.no-padding-top
.no-padding - to remove padding from all sides
Sure, you can @include only those declarations, which you need.
当然，您只能@include 那些您需要的声明。
回答by Ali G?ksel Bekta?
Hereafter only available at Bootstrap4
此后仅在 Bootstrap4 中可用
<div class="p-0 m-0">
</div>
note: .p-0 and .m-0 already added bootstrap.css
注意：.p-0 和 .m-0 已经添加了 bootstrap.css
回答by bhargav
simply Add "no-padding"which is inbuilt class in bootstrap 3
只需在 bootstrap 3 中添加内置类的“无填充”
回答by Guillaume Gautier
Bootstrap 4has a native class to do this : add the class .no-guttersto the parent .row
Bootstrap 4有一个本地类来做到这一点：将类添加.no-gutters到父类.row
回答by link
Another solution, feasible only if you compile bootstrap from its LESS sources, is to redefine the variable which sets the padding for the columns.
另一个解决方案，仅当您从其 LESS 源编译引导程序时才可行，是重新定义设置列填充的变量。
You will find the variable in the variables.lessfile: it's called @grid-gutter-width.
您将在variables.less文件中找到该变量：它被称为@grid-gutter-width.
It's described like this in the sources:
它在来源中是这样描述的：
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
Set this to 0, compile bootstrap.less, and include the resulting bootstrap.css. You are done. It can be an alternative to defining an additional rule, if you are already using bootstrap sources like I am.
将此设置为 0，编译bootstrap.less并包含生成的bootstrap.css. 你完成了。如果您已经像我一样使用引导程序源，它可以作为定义附加规则的替代方法。
回答by Smi
Bootstrap 3, since version 3.4.0, has an official way of removing the padding: the class row-no-gutters.
Bootstrap 3，从3.4.0版开始，有一个官方的方法来删除填充： class row-no-gutters。
Example from the documentation:
文档中的示例：
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
回答by Kelly Baker
Bootstrap 4 has the class .no-gutters that you can add to the row element.
Bootstrap 4 具有类 .no-gutters，您可以将其添加到行元素中。
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12">
[YOUR CONTENT HERE]
</div>
</div>
</div>
Reference: http://getbootstrap.com/docs/4.0/layout/grid/#grid-options
参考：http: //getbootstrap.com/docs/4.0/layout/grid/#grid-options
