Bootstrapの基本

  • カラム自体にmarginはなく余白はカラムのpaddingで指定されている。
  • カラムのpaddingは左右15px.
  • Bootstrapのカラムとカラムの間の余白スペースは15px+15pxで30pxになる
  • カラムのpaddingが左右15pxのため、右端と左端には15pxの余白が出来る。
  • クラスrowとは左右のマージンを-15pxとするクラス。その為にrowで囲むと上記の右端と左端の15pxの余白が消える。

ガター幅(余白)を調整する

カラムとカラムの間の余白スペース15pxを追加のスタイルシートで適用すればガター幅(余白)が調整できます。

カラムの余白スペースを変更したら、その値によってズレる左右の余白の調整が必要です。

そんな面倒な計算をしなくてもいい汎用クラスを紹介しているのがこちらのページです。

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

LESSコードを0pxから60pxまでの汎用CSSにしたのがこちらです。

使い方はrowにrow-※というクラスを追加します。

<例>余白スペースを10px、50pxにしたい

<例>HTML

768px以下でのみ適用したい場合

HTML

 

 

スポンサーリンク