bootstrapのrowに付いているマイナスのpaddingに関して

Question

いつもお世話になっております。

bootstrapのrowとcontainerに関して聞かせてください。

cdnにあるbootstrapのソースコードを読んでいると以下のように、
containerに左右のpaddingを15pxつけており、
grid layoutを作るときに必須な.rowクラスにはマイナスのpaddingをつけているものを目にします。

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

これは一体なぜなのでしょうか？
なぜマイナスのマージンで相殺しているのかがわかりません。

よろしくお願い致します。

Answer 1

.row の内包要素の始点を揃えるためではないでしょうか。

【Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお】
http://www.xmisao.com/2013/10/20/bootstrap-container-row-col-tips.html#container---row---col---row---col

ポイントは、コンテンツはcontainerクラスかcolクラスの内部に記述するようにすることだ。rowクラスの直下にはコンテンツを書いてはいけない。

というのも、Bootstrapのグリッドシステムは、(1)containerクラスがパディングを確保する。(2)rowクラスがネガティブマージンでそれを打ち消す。この組み合わせでコンテンツの始点が整列するように作られている。そのため、rowクラスの直下に何かを書くと、少し左にずれてしまうのだ。