ブートストラップ3-行クラスがコンテナーよりも広いのはなぜですか？

Bootstrap 3を使い始めました。行クラスがどのように機能するかを理解するのに苦労しています。padding-leftand を回避する方法はあり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に、列のパディングと一致する負のマージンを持つようにクラスを設定します。これにより、最初の列と最後の列のガターが「引っ張られ」、同時に幅が広くなります。

.rowdivが本当にグリッド列以外のものを保持するために使用すべきではありません。そうである場合、フィドルで明らかなように、コンテンツが列に対してシフトしているのがわかります。

更新：

私が答えた後であなたの質問を変更したので、ここであなたが今尋ねている質問への答えは次のとおりです。.container最初のクラスにクラスを追加し<div>ます。実例を参照してください。

ブートストラップ3.3.7では、この問題は.rowを.container-fluidでラップすることで解決されています。

同様の投稿に対する以下の返信を参照してください。

ブートストラップの.rowのデフォルトのmargin-leftが-30pxになっているのはなぜですか？

基本的に、「行」ではなく「クリアフィックス」を使用します。負のマージンを除いて「行」とまったく同じです。

コンテナークラス内で行クラスを使用しましたが、まだ問題がありました。私margin-left: auto; margin-right: auto;が.rowクラスに追加したとき、それはうまくいきました。

@Michelle M.はこの回答の全額を受け取る必要があります。
彼女はコメントの一つで言った：

ブートストラップ4に「mx-auto」クラスを追加すると、オーバーフローの問題が修正されました。

最初のdiv要素を次のように更新する必要があります。

<div class="row mx-auto" style="background:#000000">

すべてのネストされた行に対してこれを行う必要はありません（それらがある場合）。垂直スクロールバーを回避
するmx-autoには、最も外側row（または行）に追加するだけです。
マージンを置き換える「行」クラスを追加して、すべてのブートストラップ行の動作をオーバーライドしないでください。

この問題をデバッグする将来の開発者向け：

ブートストラップは行列のパディングを設定するため、行の内容はコンテナの外側に表示されません。これが発生し、cols ...クラスを使用してブートストラップのグリッドシステムを正しく使用している場合、列のパディングをリセットする場所に追加のCSSがある可能性があります。