去除 Bootstrap 中 col-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.

但是在Wordpress循环中，col-md-6有时会被替换为col-md-12 div，如果是这种情况，我不希望.fix-gutters应用于此。注意：我需要在与col-md-6命令相同的级别上进行覆盖。例如：

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

- user3550879

Answer 1

如果您想添加另一个类，请添加名为no-padding的类。 然后，在您的CSS中添加以下内容：

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

或者这不是您所指的意思吗？

- David

---

问题是该行的样式会应用于行内所有元素。有时候这个元素是col-md-12，有时候是col-md-6。当元素是col-md-6时，我想要移除它的左/右填充。 - user3550879

Answer 2

这将为您定位它们：（仅对main div内的元素进行更改） #main > .col-md-6{padding-right: 0; padding-left: 0;}

- Adam Buchanan Smith

Answer 3

你可以在现有的基础上添加一个新的类，但要将它指定为col-md-6。

请查看完整页面上的示例片段。

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

- vanburen

Answer 4

在 Bootstrap 4.x.x 中，您可以通过将 pl-0 应用于左侧列并将 pr-0 应用于右侧列来实现此目的。详情请参阅Spacing - Bootstrap。

- royketelaar