簡単！Bootstrap拡張：グリッドシステムの溝を複数設定する

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

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

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

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

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

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

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

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