javascript - Bootstrap : Remove column margin

Question

我有一个三列布局，我需要删除左右边距。

<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% 的浏览器窗口中使 margin-left 和 margin-right 为零。比如说，我的屏幕分辨率是 1300，所以我只需要将其包含在 .css 文件中:

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

Answer 1

您只需删除 .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;
}

Note: In the demo we will be using !important for code snippet specificity purposes. In production just reference this classes below 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 媒体查询为其元素在不同视口(viewport)中设置固定宽度。

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

你可以在这里看到它做了什么:

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