关于Bootstrap网格系统

Question

我对bootstrap 3.3.5的源代码中的这部分代码感到困惑

/*line 1585 - 1590*/
.container {
  padding-right: 15px;
  padding-left: 15px;
}
/* line 1612 - 1615*/
.row {
  margin-right: -15px;
  margin-left: -15px;
}

他们用的是什么？
-------------------------------
谢谢你们！ 这是我在阅读你的答案后的看法：
1.添加填充到.container使.container的内容远离boudary;
但是这意味着现在第一个/最后一个col是距离边界2个填充，不太好。因此，添加.row负边距以将其延伸到边界 我是对的吗？ 顺便问一下，我问了这个问题，因为我不知道是否删除了这两条规则。

Answer 1

通常情况下，容器会在左右两侧添加填充，以便内容不会直接进入屏幕边缘，使其可用于移动设备并且更易于阅读。

使用列时，这些会向左和向右添加填充，这可能与内容的其余部分“不对齐”，因此您可以使用负边距将这些填充包裹起来，以使填充符合其余的内容。

同样，这是为了使它看起来更加对齐和干净。

从Bootstrap文档（http://getbootstrap.com/css/#grid）：

  

行必须放在.container（固定宽度）或   .container-fluid（全宽），用于正确对齐和填充。

     

使用   用于创建水平列组的行。

     

应放置内容   在列中，只有列可能是行的直接子项。

Answer 2

应始终将行放在容器内以确保适当的间距（页面内容与浏览器边缘之间）。如果未在容器内放置行，则该行将比视口的宽度宽，从而导致水平滚动条。

Bootstrap行使用负边距来抵消容器的填充。最终结果是在容器内的行的侧面上没有视觉间隔（边缘或填充）。这对于响应式设计来说非常重要，因为列可以垂直包裹或堆叠（改变每行中显示的列数），以确保均匀间距。

Bootstrap 4 也是如此。

另见：
Bootstrap Rows and Columns - Do I need to use row?
How the Bootstrap grid works

Answer 3

Bootstrap列具有15px左右填充，以便它们的内容适当地间隔开。但是，这会将第一列和最后一列的内容从父节点推送出15px。为了补偿，该行具有负的左和右15px边距。这就是您应该始终在行中放置列的原因。