BLOG

ホームページ制作・Wordpress構築やHTML5やUnity3Dでのアプリ開発など
WEBやアプリ開発に関する技術的な内容をお届けいたします。

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

キャプチャ:Bootstrap

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

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

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

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



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



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


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

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

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


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


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

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

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


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