web-dev-qa-db-ja.com

Bootstrap 3グリッドシステムでガターを調整するには？

新しいBootstrap 3グリッドシステムは優れています。すべての画面サイズでレスポンシブデザインに強力であり、入れ子にした方がはるかに簡単です。

しかし、私には理解できない問題が1つあります。列間に正確なギャップを追加するにはどうすればよいですか？コンテナ960px、310pxの3列、3列の間に15pxの2つのガターがあるとします。それ、どうやったら出来るの？

marginpaddingtwitter-bootstrap-3grid-systemgutter
28
Darren Li

このためのCSSクラスを作成し、それを列に適用できます。ガター（列間の間隔）はBootstrap 3のパディングで制御されるため、それに応じてパディングを調整します。

.col {
  padding-right:7px;
  padding-left:7px;
}

デモ： http://bootply.com/9347

[〜＃〜] edit [〜＃〜]列間の間隔だけが必要な場合このように最初と最後を除くすべての列を選択できます。

.col:not(:first-child,:last-child) {
  padding-right:7px;
  padding-left:7px;
}

更新されたBootply

Bootstrap 4を参照： 特定のdivのみの余白スペースを削除

16
Zim

3列のグリッドを定義するには、 customizer を使用するか、ソースをダウンロードしてless変数を設定し、再コンパイルします。

グリッドと列/溝幅の詳細については、以下もお読みください。

960pxのコンテナを使用する場合は、中規模のグリッドを検討してください（ http://getbootstrap.com/css/#grid も参照）。このグリッドの最大コンテナ幅は970pxです。 variables.lessで@grid-columns:3;を設定し、@grid-Gutter-width:15px;を設定すると、以下が得られます。

15px | 1st column (298.33) | 15px | 2nd column (298.33) |15px | 3th column (298.33) | 15px
6
Bass Jobsen

（OPに代わって投稿）

私はそれを理解したと信じています。

私の場合、[class*="col-"] {padding: 0 7.5px;};。

その後、.row {margin: 0 -7.5px;}。

これは、両側に1pxのマージンがあることを除いて、非常にうまく機能します。だから私は.row {margin: 0 -7.5px;}から.row {margin: 0 -8.5px;}、それは完全に動作します。

なぜ1pxのマージンがあるのか​​わかりません。たぶん誰かがそれを説明できますか？

私が作成したサンプルを参照してください。

デモ
コード

2
halfer