[解決済み] Bootstrap 3 - なぜ行クラスはコンテナよりも幅が広いのですか？

質問

Bootstrap 3を使い始めたばかりです。私は困難な時間を過ごしている 行クラスがどのように動作するかを理解するのに苦労しています。 行クラスの仕組みを理解するのに苦労しています。 padding-left と padding-right ?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

どのように解決するのですか？

どのグリッドシステムでも、各カラムの間にはガターがあります。Bootstrapのシステムでは、この溝を作るために各カラムの左と右の両方に15pxのパディングを設定します。

問題は、最初の列の左側に半分のガターがあってはならず、最後の列の右側に半分のガターがあってはならないということです。ある種の .first または .last クラスを設定する代わりに、その列に対して .row クラスを設定し、列のパディングに一致する負のマージンを持つようにします。これにより、最初と最後の列からガッターを引き離すと同時に、幅を広げることができます。

は .row div はグリッドカラム以外のものを保持するために使用すべきではありません。もし使用した場合、コンテンツがどのカラムに対しても相対的に移動してしまうことが、あなたの実験で明らかになりました。

UPDATE。

私が回答した後に質問を修正されましたので、現在の質問に対する回答を掲載します。を追加します。 .container クラスを最初の <div> . 参照 動作例 .