122

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/

4

6 に答える 6

160

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

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

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

アップデート：

私が回答した後に質問を変更したため、現在尋ねている質問への回答は次のとおりです。.containerクラスを最初の に追加し<div>ます。作業例を参照してください。

于 2013-09-23T21:47:42.240 に答える
29

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

于 2017-01-12T17:38:24.213 に答える
1

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

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

于 2016-11-18T00:42:03.610 に答える