谁能告诉我为什么在 bootstrap3 中 .row 有 -15px 的边距和 .col-* 的 15px 填充

【问题标题】：can anyone tell my why in bootstrap3 there is an -15px margin for .row and 15px padding for .col-*谁能告诉我为什么在 bootstrap3 中 .row 有 -15px 的边距和 .col-* 的 15px 填充
【发布时间】：2014-01-13 10:55:18
【问题描述】：

我发现在 bootstrap3 中，.row 的边距为 -15px，.col-* 的边距为 15px。

这似乎没有任何作用，谁能告诉我其中的秘密？

.row {
   margin-right: -15px;
   margin-left: -15px;
}
.col-xs-1,
.col-sm-1,
...
.col-md-12,
.col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

【问题讨论】：

标签： css twitter-bootstrap-3

【解决方案1】：

列之间有间隙。这就是他们如何以最兼容的方式使连续的第一个 col 没有间隙。他们可以使用旧浏览器不支持的 this 或 css first of type selector

【讨论】：

哇，所以它只是为了简单地解决第一个左填充和最后一个右填充？

【解决方案2】：

col- 类在两边都有相同的填充像素，比如15px，这样你就可以在每列之间获得30px 排水沟空间。如果您在container 中有row，它将在容器和行之间提供15px 额外的填充，因为容器在左侧和右侧都有15px 填充。为了避免这个额外的空间，列有-15px 边距。当您在 cols 中嵌套行时，这将有助于获得整洁的列布局。

希望你能理解。

【讨论】：