Bootstrap的.row margin-left:-15px-为什么超出(来自文档) [英] Bootstrap's .row margin-left: -15px - why is it outdented (from the docs)

问题描述

我在以下网址的Bootstrap文档中遇到了这一行: http://getbootstrap.com/css/#grid-intro

I came across this line in the Bootstrap documentation at this url: http://getbootstrap.com/css/#grid-intro

它说:

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

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
• The negative margin is why the examples below are outdented. It's so that content within grid columns is lined up with non-grid content.

第一个有意义.但是，我没有第二个.如果您查看该页面，则网格示例确实已突出，但是未却未将网格与内容的其余部分对齐.它只是保持它...嗯...简直是. :-)

The first one makes sense. However, I don't get the second one. If you look at the page, the grid examples are indeed outdented but that does not align the grid to the rest of the content. It just keeps it... um... outdented. :-)

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

Can someone explain to me what they are trying to say here?

谢谢！

推荐答案

您需要查看列中的 内容 ，即与其余内容一致的内容页面上的内容，因为这是在实际网站中使用列时实际可见的内容.

You need to look at the content within the columns, that is what is aligned with the rest of the content on page, because that is what is actually visible when using columns in a real site.

在docs示例中，将样式(边框和背景色)应用于列只是为了向您展示它们的工作方式，在实物世界中，您不会将样式应用于列本身，因此不会将样式应用于列页面将正确对齐.

In the docs example, styles (border and background-color) are applied to the columns just to show you how they work, in the real-wold you would not apply styles to the columns themselves and thus all the content on the page would align correctly.

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

Look what happens when I turn off the custom styles on the columns...

这篇关于Bootstrap的.row margin-left:-15px-为什么超出(来自文档)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！