Bootstrap的.row margin-left：-15px - 为什么它缩进（来自文档）

Question

我在这个url的Bootstrap文档中遇到了这一行： http://getbootstrap.com/css/#grid-intro

它说：

• 列通过填充创建装订线（列内容之间的间隙）。 该填充在第一列和最后一列的行中偏移 .rows上的负余量。
• 负边距是以下示例缩进的原因。就是这样 网格列中的内容与非网格内容对齐。

第一个是有道理的。但是，我没有得到第二个。如果您查看页面，网格示例确实缩进，但不将网格与其余内容对齐。它只是保持......嗯...缩进。 :-)

有人可以向我解释他们在这里想说些什么吗？

谢谢！

Answer 1

您需要查看列中的 内容 ，即与页面上其他内容对齐的内容，因为这是实际可见的内容在真实网站中使用列。

在文档示例中，样式（边框和背景颜色）应用于列只是为了向您展示它们的工作方式，在实际情况下，您不会将样式应用于列本身，因此也不会将样式应用于列页面将正确对齐。

看看当我关闭列上的自定义样式时会发生什么......

Answer 2

col-*属性向元素添加15px填充，而row元素应用-15px水平边距，这意味着它会突然出现。

两者都是必需的，所以它使它流畅和对齐。

根据示例，看起来没有row元素包装它们。它是如何工作的以及它们如何在bootstrap网站上使用它并没有相关性。我不会仅仅按照文档中的示例进行操作。尝试自己并获得一个想法。