Bootstrap：删除列边距答案

【问题标题】：Bootstrap: Remove column marginBootstrap：删除列边距
【发布时间】：2017-02-22 22:26:44
【问题描述】：

我有一个三栏布局，需要去掉左右边距。

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

我试过了

.row-no-padding {
   margin-left: 0;
   margin-right: 0;
}

没有结果... fiddle

编辑：我需要保持class="container" 完整。

所以，我需要什么：以及我现在拥有的：

编辑：所以，根据 Ricky_Ruiz 关于.container 属性的说法：我希望在 100% 的浏览器窗口中使左边距和右边距为零。比如说，我的屏幕分辨率是 1300，所以我只需要将它包含在 .css 文件中：

@media (min-width: 1300px) {
  .container {
    width: 1300px;
  }
}

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

使用 .container-fluid 代替 .container。

你看到的margin来自container-width设置的宽度。

【讨论】：

我不想使用流体容器。需要明确找到class="container" 的解决方案。

【解决方案2】：

您正在使用 .container，请改用 .container-fluid

【讨论】：

【解决方案3】：

您只需要删除 .row 类的边距和 .col 类的填充。

.row-no-padding {
  margin-left: 0;
  margin-right: 0;
}

[class*="col-"],  /* Elements whose class attribute begins with "col-" */
[class^="col-"] { /* Elements whose class attribute contains the substring "col-" */
  padding-left: 0;
  padding-right: 0;
}

注意：在演示中，我们将使用 !important 来实现代码 sn-p 特异性。生产中只需参考这些类下面 bootstrap.css。

代码片段：

.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

编辑：

OP 真正想要的是让子元素比其父元素更宽。

虽然this可以通过不同的方式实现，但我并不推荐。

最佳方法是为内容使用不同的容器。这就是为什么 Bootstrap 有一个名为 .container-fluid 的类。您只需在此类中将 padding 值设置为 0 即可。

代码片段：

body {
  margin: 0;
}
main {
  background-color: coral;
}
.container-fluid--no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row {
  border: .1em dashed dodgerblue;
}
.row-no-padding {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
[class*="col-"],
[class^="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<main>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
  <div class="container-fluid container-fluid--no-padding">
    <div class="row row-no-padding">
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
      <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    </div>
  </div>
  <div class="container">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
  </div>
</main>

进一步说明：

Bootstrap 中的.container 类是如何工作的？

.container 类使用 CSS 媒体查询在不同视口中为其元素设置固定宽度。

由于 Bootstrap 是移动优先的，.container 类中的width 属性的值为auto（块级元素默认宽度）。然后它会根据查询相应地更改其视口。

你可以在这里看到它的作用：

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.container-fluid 类属性如下：

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}

【讨论】：

sn-p 似乎不起作用。左右列与屏幕边缘之间总是有一个空间。

【解决方案4】：

试试这个：

.row-no-padding {
  padding-left: 0;
  padding-right: 0;
}

.row-no-padding.col-sm-4 {
  padding: 0;
}

<div class="container">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <div class="row row-no-padding">
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
  </div>
</div>

【讨论】：

【解决方案5】：

如果你想使用 col-sm-4 类来定位 div，那么你可以这样做：

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
}
.row-no-padding .col-sm-4 {
    padding-left: 0;
    padding-right: 0;
}

如果您将类和/或 id 链接在一起，则无需添加重要信息（这就像将值相加，id 是最多的点，类是下一个，然后是标签名称）。这将使代码在未来更加简洁和实用。

fiddle 在 JavaScript 区域中有 css，它的结构类似于 LESS 或 SASS，所以它不会运行。可能只是一个过度的网站。这是另一个：fiddle

如果要删除容器上的所有边距，可以将容器设置为 full with 并删除填充：

body > .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
}

fiddle

【讨论】：

【解决方案6】：

您的小提琴几乎具有正确的 css，但您已将其粘贴到 javascript 窗口中。您还列出了两次该类。我已经更新到以下内容：

.row-no-padding {
    margin-left: 0;
    margin-right: 0;
    [class*="col-"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

在这里查看实际操作：

http://codepen.io/egerrard/pen/LRmpYj

【讨论】：

但边距不为零。我需要一个紫色和一个蓝色的柱子延伸到边缘，这样就看不到灰色了。
@parsecer，那么您需要从 .container 中删除填充并将宽度设置为 100%。请参阅我的答案中的第二个小提琴。
@parsecer 我已经更新了我的 codepen 以反映您的需求。我不会改变容器在任何地方的工作方式，而是创建一个新类。正如您上面提到的，您需要使用容器类，因此添加一个具有您想要的功能的附加类。或者您可以覆盖 .container 但不建议这样做。
@parsecer 好的，更新了 2 倍以保持 class="container" 不变。我现在在容器周围包裹另一个 div。您可以使用此方法或仅将类添加到容器 div。无论哪种方式都会得到相同的结果。

【解决方案7】：

另一个简单的选择是：

.row {
    margin-left: 0px;
    margin-right: 0px;
}

.col-12 {
    padding-left: 0px;
    padding-right: 0px;
}

【讨论】：

在这种情况下，我从包含“row”类的所有 div 中删除边距，并从包含“col-12”的所有 div 中删除填充。如果您想从“col-12”以外的另一个类中移除填充，您可以简单地替换为“col-x”，其中 x 是您从引导程序中获得的名称类...