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

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

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

サンプル１

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

サンプル

.col-xs-6 .col-md-3

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

ソースコード

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

サンプル２

サンプル

.col-xs-12 .col-md-8

.col-xs-12 .col-md-4

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

ソースコード

<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
		<div class="col-xs-12 col-md-4">.col-xs-12 .col-md-4</div>
	</div>
</div>

サンプル３

サンプル

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

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

ソースコード

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

サンプル４

サンプル

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

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

ソースコード

<div class="container-fluid">
	<div class="row sampleRow">
		<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		<div class="clearfix visible-xs-block"></div>
	</div>
</div>