Html 删除 col-md-6 Bootstrap 上的左/右填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34913215/
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 left/right padding on col-md-6 Bootstrap
提问by user3550879
I have a site utilizing Bootstrap but I want to override the left and right padding on just the columns col-md-6 (set them to 0px). Not sure how to do it, my current set up is ...
我有一个使用 Bootstrap 的站点，但我只想覆盖 col-md-6 列的左右填充（将它们设置为 0px）。不知道怎么做，我目前的设置是...
css
css
.fix-gutters > [class^="col-"],
.fix-gutters > [class*=" col-"] {
padding-right: 0px;
padding-left: 0px;
}
and applying it to
并将其应用于
<div id="main" class="row fix-gutters">
.... <div class="col-md-6"> ... etc.
but that col-md-6 sometimes gets replaced (Wordpress loop) with a col-md-12 div and I don't want .fix-gutters to apply if that's the case.
但是 col-md-6 有时会被 col-md-12 div 替换（Wordpress 循环），如果是这种情况，我不希望 .fix-gutters 应用。
NOTE: i need the override to happen on the same level as the col-md-6 command. example
注意：我需要覆盖发生在与 col-md-6 命令相同的级别上。例子
<div class="col-md-6 overide-class">
采纳答案by Adam Buchanan Smith
This will target them for you: (will only make the change to elements inside the maindiv)
这将为您定位它们：（只会对maindiv内的元素进行更改）
#main > .col-md-6{padding-right: 0; padding-left: 0;}
#main > .col-md-6{padding-right: 0; padding-left: 0;}
回答by David
Ifyou want to add another class, just add a class called no-padding.
如果要添加另一个类，只需添加一个名为no-padding.
Then, in your CSS, add:
然后，在您的 CSS 中，添加：
.no-padding {
padding-right: 0 !important;
padding-left: 0 !important;
}
Or is this not what you mean?
或者这不是你的意思？
回答by vanburen
You can simply add an new class to what you are allready but specify it for col-md-6
您可以简单地向已有的类添加一个新类，但指定它 col-md-6
See example Snippet at FullPage.
请参阅 FullPage 的示例代码段。
.fix-gutters > [class*="col-"],
.fix-gutters-six > [class*="col-md-6"] {
padding-right: 0;
padding-left: 0;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
<h2>
Removed Padding only from Medium 6 Columns
</h2>
<div class="row fix-gutters-six">
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding on 6 Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding on 6 Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Default 12 Columns
</div>
</div>
</div>
<div class="row">
<h2>
Default Columns
</h2>
<div class="col-md-6">
<div class="alert alert-info">
Default 6 Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Default 6 Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Default 12 Columns
</div>
</div>
</div>
<div class="row fix-gutters">
<h2>
Removed Padding from All Columns
</h2>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding from all Columns
</div>
</div>
<div class="col-md-6">
<div class="alert alert-info">
Removed Padding from all Columns
</div>
</div>
<div class="col-md-12">
<div class="alert alert-danger">
Removed Padding from all Columns
</div>
</div>
</div>
</div>回答by royketelaar
As of Bootstrap 4.x.x you can achieve this by applying pl-0to the left column and pr-0to the right column. See Spacing - Bootstrapfor more information.
从 Bootstrap 4.xx 开始，您可以通过应用pl-0到左列和pr-0右列来实现这一点。有关更多信息，请参阅间距 - Bootstrap。
