html5 - bootstrap簡介中的一點問題

Question

剛才看到這句話：
透過為「列（column）」設定 padding 屬性，從而建立列與列之間的間隔（gutter）。透過為 .row 元素設定負值 margin 從而抵消掉為 .container 元素設定的 padding，也就間接為「行（row）」所包含的「欄位（column）」抵消掉了padding。
不是很能理解是怎麼個說法，有沒有通俗一點的說法或是例子？ ？

Answer 1

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去掉對比下，看下區別