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


Bootstrap4で作る最強WordPressオリジナルテーマ開発 その4 グリッドシステムとブレークポイント

前回はBootstrapにはカラムという概念があり、合計して12になるように設計する、という話をしました。
今回はレイアウトグリッドのブレークポイントとサイズについてです。

カラムにはブレークポイントというものが設定されています。画面幅のサイズに合わせてカラムを改行するポイントをブレークポイントと呼びます。以下にサイズ表としてまとめました。

[table id=38 /]

カラムを変化させたくない場合は「col-xs-」を指定しておけば、それ以下の画面幅が設定されていないのでカラムが変化しません。
注意点として、Bootstrapのグリッドには各カラム間にガター(余白)が設定されていることです。
左右に15pxずつ合計で30pxのあそびが設定されています。
なので公式情報では各サイズの最大カラム実寸は以下の通りです。

[table id=39 /]

実はcontainerクラスにはもう1つ「.container-fluid」というクラスがあります。
「container」を「container-fluid」に変えると、画面幅いっぱいに広がります。
画面幅で成り行きでグリッドを作りたい場合は、「container-fluid」を使います。

<div class="container-fluid">
	<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>

▼サンプル1

前回はBootstrapにはカラムという概念があり、合計して12になるように設計する、という話をしました。 今回はレイアウトグリッドのブレークポイントとサイズについてです。

ここでお分かりの通り、Bootstrapでは固定幅には対応していないため、12カラムの組合せの中で近似値を探すことになります。

関連記事