フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

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>

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

lesson-school.com/wp-content/lesson/bootstrap/05_R14o/01.html

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

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

コメント

  1. 2018/12/09(日) 06:21:30
    今日の夢は高校時代のクラスがベースでそのなかにジャグリの面子が混ざった状態の卒業式に出てた いしがきとあゆが在校生代表として ボーリングしてガター出してた、あとののが大泣きしてた 最後は学校がパンデミックになって終わった

記事に戻る

コメントを残す