28

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

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

4

3 に答える 3

17

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

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

デモ: http://bootply.com/93473

編集列間の間隔のみが必要な場合は、このように最初と最後を除くすべての列を選択できます..

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

更新された Bootply

Bootstrap 4 については、「特定の div のみガター スペースを削除する」を参照してください。

于 2013-11-11T17:34:39.250 に答える
6

3 列のグリッドを定義するには、カスタマイザーを使用するか、ソース セットをダウンロードして変数を減らして再コンパイルします。

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

コンテナが 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
于 2013-11-11T19:26:08.187 に答える
3

（OPに代わって投稿）。

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

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

次に追加しまし.row {margin: 0 -7.5px;}た。

両側に 1px の余白があることを除けば、これはかなりうまく機能します。だから私はするだけ.row {margin: 0 -7.5px;}で.row {margin: 0 -8.5px;}、それは完全に機能します。

1px の余白がある理由がわかりません。多分誰かがそれを説明できますか？

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

デモ
コード

于 2014-11-27T01:08:24.613 に答える