モバイル、タブレット、デスクトップ用グリッド・システム ≪ グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス

モバイル向けのcol-xs-*、タブレット向けのcol-sm-*、デスクトップ向けのcol-md-*を使ったレスポンシブ・グリッド・システムのサンプル。

ブラウザのサイズを変更して、768px未満、768px〜991px、992px以上の幅で確認してみて。

サンプル１

モバイルでは１列、タブレットでは２列、デスクトップでは４列となる。

サンプル

.col-xs-12 .col-sm-6 .col-md-3

比較しやすいように、カラムに枠線を付けてある。

ソースコード

<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 .col-sm-6 .col-md-3</div>
		<div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 .col-sm-6 .col-md-3</div>
		<div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 .col-sm-6 .col-md-3</div>
		<div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 .col-sm-6 .col-md-3</div>
	</div>
</div>

サンプル２

モバイルでは１列、タブレットではメンコンテンツの右にメニューＢ、デスクトップではメンコンテンツの左にメニューＡ、右にメニューＢとなる。

サンプル

ヘッダー

メニューＡ

メンコンテンツ

メニューＢ

フッター

比較しやすいように、カラムに枠線を付けてある。

ソースコード

<style>
.sampleRow4 > div {
	min-height: 3em;
	border: 1px solid gray;  
}
</style>
<div class="container-fluid">
	<div class="row sampleRow4">
		<div class="col-xs-12">ヘッダー</div>
	</div>
	<div class="row sampleRow4">
		<div class="col-xs-12 col-md-3">メニューＡ</div>
		<div class="col-xs-12 col-sm-8 col-md-6" style="height: 9em;">メンコンテンツ</div>
		<div class="col-xs-12 col-sm-4 col-md-3">メニューＢ</div>
	</div>
	<div class="row sampleRow4">
		<div class="col-xs-12">フッター</div>
	</div>
</div>