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

注意：在演示中，我们将使用!important来实现代码段特异性。在生产中只需引用此类以下 bootstrap.css。

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

编辑：

OP实际上想要的是让子元素比其父元素宽。

尽管可以通过不同的方式实现 this ，但我不建议这样做。

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

代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

进一步解释：

Bootstrap中的.container类如何工作？

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

由于Bootstrap首先是移动的，因此width类中.container属性的值为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;
}

Answer 2

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

Answer 3

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

iron-resizable-behavior

如果将类和/或ID链接在一起，则无需添加重要内容（它就像添加值一样，其中id为最多点，类是下一个，然后是标记名称）。这将使代码更清洁，将来更有用。

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

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

resizerShouldNotify

fiddle

Answer 5

您的小提琴几乎是正确的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

Answer 6

使用.container-fluid代替.container。

您看到的边距来自容器宽度设置的宽度。

Answer 7

另一个简单的选择是：

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

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

Bootstrap：删除列边距

7 个答案:

编辑：

进一步解释：