删除 col-md-6 Bootstrap 上的左/右填充答案

【问题标题】：removing left/right padding on col-md-6 Bootstrap删除 col-md-6 Bootstrap 上的左/右填充
【发布时间】：2019-11-29 21:01:40
【问题描述】：

我有一个使用 Bootstrap 的站点，但我想仅覆盖 col-md-6 列的左右填充（将它们设置为 0px）。不知道怎么做，我目前的设置是...

css

.fix-gutters > [class^="col-"],
.fix-gutters > [class*=" col-"] {
  padding-right: 0px;
  padding-left: 0px;
}

并将其应用于

<div id="main" class="row fix-gutters">

    .... <div class="col-md-6"> ... etc.

但 col-md-6 有时会被 col-md-12 div 替换（Wordpress 循环），如果是这种情况，我不希望 .fix-gutters 应用。

注意：我需要在与 col-md-6 命令相同的级别上进行覆盖。例子

<div class="col-md-6 overide-class">

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

如果你想添加另一个类，只需添加一个名为no-padding的类。

然后，在你的 CSS 中，添加：

.no-padding {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

或者这不是你的意思？

【讨论】：

问题是该行被应用到里面的任何东西。有时它是 col-md-12，有时它是 col-md6。当它是 col-md-6 时，我希望删除它的右/左填充

【解决方案2】：

这将为您定位它们：（只会更改 main div 内的元素）

#main > .col-md-6{padding-right: 0; padding-left: 0;}

【讨论】：

【解决方案3】：

你可以简单地为你已经准备好的添加一个新类，但将它指定为col-md-6

在 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>

【讨论】：

【解决方案4】：

从 Bootstrap 4.x.x 开始，您可以通过将pl-0 应用于左列并将pr-0 应用于右列来实现此目的。请参阅Spacing - Bootstrap 了解更多信息。

【讨论】：