Question

我有一个使用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">

Answer 1

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

然后，在CSS中添加：

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

或者这不是你的意思吗？

Answer 2

这将针对您:(只会对main div内的元素进行更改）

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

Answer 3

您可以简单地将新类添加到您已经准备好的类中，但为col-md-6

指定它

请参阅FullPage上的示例代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

4 个答案: