web-dev-qa-db-ja.com

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/

twitter-bootstraptwitter-bootstrap-3
107
Petran

すべてのグリッドシステムでは、各列の間に溝があります。 Bootstrapのシステムは、各列の左右に15ピクセルのパディングを設定して、このガターを作成します。

問題は、最初の列の左側に半分のガターがあってはならず、最後の列の右側に半分のガターがあってはならないことです。一部のグリッドシステムのように、これらの列で何らかの.firstまたは.lastクラスを使用するのではなく、列のパディングに一致する負のマージンを持つように.rowクラスを設定します。これにより、最初の列と最後の列の側溝が「引き寄せられ」、同時に幅が広くなります。

.row divは、グリッド列以外を保持するために実際に使用しないでください。そうであれば、フィドルで明らかなように、コンテンツが列に対してシフトされていることがわかります。

更新：

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

135
Sean Ryan

bootstrap 3.3.7を使用すると、この問題は.rowを.container-fluidでラップすることで解決されます。

21
dbarma

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

なぜbootstrap .rowのデフォルトの余白は-30pxですか？

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

18
Kyle

コンテナクラス内で行クラスを使用しましたが、まだ問題がありました。 margin-left: auto; margin-right: auto;クラスに.rowを追加すると、問題なく機能しました。

15
Jeffrey

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

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

1
JSideris

@Michelle M.は、この回答に対して全額クレジットを受け取る必要があります。
彼女はコメントの1つで言った：

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

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

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

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

1
MikeTeeVee