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