html5 - bootstrap简介中的一点问题

Question

刚才看到这句：通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列...

淡淡烟草味 · Answer

row的负margin值主要是为了消除最左边和最右边的column元素和container的边距

可以看下原文（http://getbootstrap.com/css/#...）

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.

我们知道bootstrap中栅格的使用顺序是 container -> row -> col

他们的css定义：

.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}

.col-*-* {
    padding-right: 10px;
    padding-left: 10px;
}

如果没有负margin的抵消，前后就会有间隙，你可以自己把负margin去掉对比下，看下区别