Bootstrap3
日本語リファレンス

広告

モバイル、タブレット、デスクトップ用グリッド・システム


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

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


サンプル1

モバイルでは1列、タブレットでは2列、デスクトップでは4列となる。

サンプル
.col-xs-12 .col-sm-6 .col-md-3
.col-xs-12 .col-sm-6 .col-md-3
.col-xs-12 .col-sm-6 .col-md-3
.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>

サンプル2

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

サンプル
ヘッダー
メニューA
メンコンテンツ
メニューB
フッター
ソースコード
<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">メニューA</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">メニューB</div>
	</div>
	<div class="row sampleRow4">
		<div class="col-xs-12">フッター</div>
	</div>
</div>

広告