サイト制作に関するメモ書き

HOME > HTML・CSS > BootstrapのGrid systemの使い方

BootstrapのGrid systemの使い方

BootstrapのGrid systemについて、大まかな使い方はBootstrapを使ってみるの記事内で書いたので、今回は前に触れなかった部分を見てみたいと思います。

Nesting columns

列の水平方向のグループを作成する.rowは、入れ子にすることができます。
例えば、下記のように幅の広い時は4列、狭めた時は下に落として2列ずつにしたいとき、

use-grid-system-in-bootstrap01

下記のデモ1のように一番左の要素の高さが高い時、3列目以降が1列目の要素の右にきてしまいます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3<br />テキスト<br />テキスト<br />テキスト</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
		<div class="col-xs-6 col-md-3">.col-xs-6<br />.col-md-3</div>
	</div>
</div>

Nesting columnsのデモページ1
 

最初の2列と後の2列を別々の入れ子にすることで、想定した通りのレイアウトにできます。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="row">
				<div class="col-xs-6 col-md-6">.col-xs-5<br />.col-md-3<br />テキスト<br />テキスト<br />テキスト</div>
				<div class="col-xs-6 col-md-6">.col-xs-7<br />.col-md-4</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="row">
				<div class="col-xs-6 col-md-6">.col-xs-6<br />.col-md-3</div>
				<div class="col-xs-6 col-md-6">.col-xs-6<br />.col-md-2</div>
			</div>
		</div>
	</div>
</div>

Nesting columnsのデモページ2
 

Column ordering

列の並び順を変更することができます。

col-size-push-num 指定した列をnumの値だけ右側に移動します。
sizeに使用する画面サイズ(lg,md,sm,xs)、
numに1~12の数値を指定します。
col-size-pull-num 指定した列をnumの値だけ左側に移動します。
sizeに使用する画面サイズ(lg,md,sm,xs)、
numに1~12の数値を指定します。

HTML

<div class="container">
	<div class="row">
		<div class="col-xs-5 col-md-5 col-md-push-4" style="background: #E74C3C;">.col-xs-5<br />.col-md-5</div>
		<div class="col-xs-4 col-md-4 col-md-pull-5" style="background: #3498DB;">.col-xs-4<br />.col-md-4</div>
		<div class="col-xs-3 col-md-3" style="background: #2ECC71;">.col-xs-3<br />.col-md-3</div>
	</div>
</div>

Column orderingのデモページ

デモページの場合、画面サイズがmd(992px以上)の時、1番目の赤い要素を右へ4列分移動、
2番目の青い要素を左へ5列分移動しています。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP