Bootstrap3
日本語リファレンス

広告

入れ子(ネスト)


カラムを入れ子(ネスト)にして配置することもできる。


サンプル

サンプル
.col-xs-10
.col-xs-4
.col-xs-4
.col-xs-4
col-xs-2
ソースコード
<style>
.sampleRowA > div {
	min-height: 6em;
	border: 1px solid gray;  
	background: #cef3f5;
}
.sampleRowB > div {
	min-height: 3em;
	border: 1px solid gray;  
	background: #f5cece
}
</style>
<div class="container-fluid">
	<div class="row sampleRowA">
		<div class="col-xs-10">
			.col-xs-10
			<div class="row sampleRowB">
				<div class="col-xs-4">.col-xs-4</div>
				<div class="col-xs-4">.col-xs-4</div>
				<div class="col-xs-4">.col-xs-4</div>
			</div>
		</div>
		<div class="col-xs-2">
			col-xs-2
		</div>
	</div>
</div>

広告