移除头-md-6上的左/右垫子

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，我不希望..fix gutters适用。

注意:我需要覆盖发生在与col-md-6命令相同的级别上。示例

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

Answer 1

这将针对您的目标：(只对main div中的元素进行更改)

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

Answer 2

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

然后，在CSS中添加：

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

还是你不是这个意思？

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

​