入れ子(ネスト)
カラムを入れ子(ネスト)にして配置することもできる。
サンプル
サンプル
.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>