この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


Bootstrap4で作る最強WordPressオリジナルテーマ開発 その5 グリッドシステムのガター調整と横揃えと縦揃え

前回はブレークポイントについてお話をしました。今回はガター調整と横揃えと縦揃えについてです。
Bootstrapのグリッドシステムにはガター(溝余白)が設定されています。
このガターがあって助かる場合と、困る場合があります。

ガターをなくしたり、幅を調整したりする方法は、スタイルシートに書いて解決します。
例えば以下のようなグリッドがあるとします。

<div class="container">
	<div class="row">
		<div class="col-md-6">6</div>
		<div class="col-md-4">4</div>
		<div class="col-md-2">2</div>
	</div>
</div>

これをブラウザで見るとこうなります。

分かりやすく色を付けてみます。
グリッドは分かりやすいようにa、b、c、backcolorと背景色を指定したものが以下になります。

<div class="container">
	<div class="row">
		<div class="col-md-6 a"><span class="backcolor">6</span></div>
		<div class="col-md-4 b"><span class="backcolor">4</span></div>
		<div class="col-md-2 c"><span class="backcolor">2</span></div>
	</div>
</div>

これをブラウザで見るとこうなります。

赤、青、緑の部分がガターとなります。標準で15pxと決まっています。
Bootstrapでは、「container」クラスに囲まれた「row」クラスの左右のマージンが「-15px」され、続く「col-任意のサイズ」クラスでは、左右のパディングが「+15px」されています。
マージンで15px引いて、パディングで15pxを確保しているわけですね。

なので、ガターを消したい場合は逆の指定をしてあげれば良いことになります。

関連記事