SPOTブログ

【ガターの幅を変えたい！？】Bootstrapのグリッドシステムをもっと便利にするCSS(LESS)コード

最近のWEB制作案件ではもうBootstrapが手放せなくなってきた今日このごろ、かねしまです。

Bootstrapすごく便利なんですが、やっぱり汎用的なCSSフレームワークなのでちょこちょこ使いにくいところも有りますよね。

デザインコンポーネントはBootstrap無視してゴリゴリCSS書いちゃえばいいのですが、グリッドシステムの部分はそうはいきませんよね・・・

Bootstrapのgutter width（カラムとカラムの間の余白スペース）が標準では30pxとなっており、これはLESSファイルをいじれば変更はもちろん可能なのですが、特定のrowごとにgutter widthを変更したい、っていうときが結構あるんですよね。

そんな時に便利なのが、以下のコードです。

 

Bootstrapのガター幅（余白）を選べるようにするLESS

 よく使うガターの横幅をLESSで作っておきます。たったこれだけです。

使い方

これで、ガターを20にしたいときはrow-20を、ガター無しにしたいときはrow-0をクラスに当ててやればOKです。

通常時 (gutter width  30px)

 

要素間のスペース・余白がbootstrapの標準設定の30pxになっています。

例 ガターを20にしたい

 rowにrow-20というクラスを追加するだけです。

 

例 ガターを0にしたい

 これも同様に、rowにrow-0クラスを付与するだけです。

 

たったこれだけで、rowごとにガターサイズを変更することが出来るようになります。

すごく便利になるので、ぜひ使ってみてください。