Bootstrap 的 .row margin-left: -15px - 为什么它会突出（来自文档）

Question

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

上面写着：

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

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

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

谢谢！

Answer 1

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

在文档示例中，样式（边框和背景色）应用于列只是为了向您展示它们是如何工作的，实际上您不会将样式应用于列本身，因此不会将样式应用于列上的所有内容页面将正确对齐。

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

Answer 2

col-* 属性将15px 填充到元素，而row 元素应用-15px 水平边距，这意味着它会突出以使其均匀。

两者都是必需的，因此它可以使其流畅且对齐。

根据示例，似乎没有 row 元素包裹它们。它是如何工作的，以及他们如何在引导网站上使用它是不相关的。我不会只看文档中的示例。尝试自己并获得想法。