Bootstrapは大変便利なものですが、ちょっとしたCSSを追加するともっと便利に利用できるようになります。
今回はBootstrapのグリッドシステムの溝(gutter)を複数設定できるようにします。

1.グリッドシステムに対して、溝の設定を追加する

追加するCSSコードは下記のコードです。(BootstrapのCSSは既に読み込まれている前提です)

ポイントとしては、親に当たる.rowと子に当たる.col-xx-xxに対して、1組みずつマージンとパディングを設定します。



HTMLの記述は、下記のような形になります。



実際に上記コードを適用した表示例です。


ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。


溝を変更していない通常の表示です。(溝幅:30px)


ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。

Bダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。ダミーテキストです。


このようにちょっとしたCSSを追加するだけで簡単にマルチガーター(複数溝)のグリッドシステムを利用できます。
ページが間延びしてしまい、少しリズムを変えたいときなどに効果的に利用できます。

メニュー