web-dev-qa-db-ja.com

Bootstrap行クラスには、左マージンと右マージンが含まれ、問題が発生します

私はBootstrap 'row'クラスを使用してdivsを上下に揃えていますが、うまく機能しますが、

.row {
   margin-left: -15px;
   margin-right: -15px;
 }

私が気づいたのは、margin-left属性とmargin-right属性が-13pxに指定されているためです。これにより、コンテンツが左にシフトされます。したがって、次のように別のクラスを追加しました：

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
}

これで目的は解決しますが、'margin-left: -15px; 'に特定の理由があるかどうかを知りたいです。そして、私の問題を解決するための最良のアプローチは何ですか。

htmlcsstwitter-bootstraptwitter-bootstrap-3
46
Tarun Gupta

.rowは、container内で使用するためのものです。 containerには.rowの負のマージンを調整するパディングがあるため、.row内で使用されるグリッド列は、コンテナーの全幅に調整できます。 Bootstrapのドキュメントを参照してください： http://getbootstrap.com/css/#grid

以下に例を示します。 http://bootply.com/131054

そのため、.rowまたは.container内に.container-fluidを配置するより良い解決策があります

79
Zim

Rowの代わりにrow-fluidを使用すると、この問題は発生しません。 （以前のバージョンのブートストラップ用）

いずれにしても、最近のバージョン3についてはわかりません。

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

これについての詳細は なぜbootstrap .rowのデフォルトのマージン左は-30pxですか？

7
4dgaurav

Bootstrap 3を使用していますか？私のバージョンのcssは-13pxではなく-15pxです。いずれにせよ、私はあなたが下したことを単純に行い、スタイルを上書きしました。 .containerクラスの左右に15pxのパディングがあり、行のこの負のマージンにより、そのコンテンツがコンテナーのEdgeに戻されるためだと思います。

2
JesseEarley

古いトピックですが、最近、この影響を受けました。

「row」の代わりに「row-fluid」クラスを使用するとうまくいきましたが、今後完全にサポートされるかどうかはわかりません。

なぜbootstrap .rowのデフォルトの左マージンは-30pxです 私は<div>（行クラスなし）を使用しましたが、正確に動作しました<div class="row-fluid">など

1
ShhTot

私はこれと同じ問題に直面しており、最初は行の左右のマージンを削除し、水平スクロールを削除しましたが、それは良くありませんでした。その後、45分間の検査と検索を行った後、私はコンテナー流体を使用しており、パディングを削除しており、その内側の行には左右の負のマージンがあったことがわかりました。だから私は、コンテナ流体にパディングを戻し、すべてが正常に戻った。

コンテナ流体のパディングを削除する必要がある場合は、プロジェクト内のすべての行の左右の負のマージンを削除するのではなく、代わりにクラスを導入し、目的のコンテナで使用します

0
Junaid