嵌套行col网格视图

Question

我想创建网格视图，其中row1包含10％的页面高度，row2包含90％。

我试图调整它，因为第2行中col2的元素增加，所以芽体部分不会在第2行增长。

有没有什么好方法可以组织这个？

Row2有两个col，col1是正文部分col-xs-8，col2是col-xs-8的元素选择框

小提琴：http://jsfiddle.net/q18yzkoz/2/

此col2将被划分为12X2网格的网格。

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="background-color:lavender;">
            <div class="header">Heeader</div>
        </div>  
    </div>

    <div class="row" >
        <div class="col-xs-8" style="background-color:lavenderblush;">ad</div>
        <div class="col-xs-4" style="background-color:lavender;">
            <!-- 12 repeated rows as velow -->
            <div class="row" >
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">Item1</div>
                </div>
                <div class="col-xs-6" style="background-color:lavender;">
                    <div class="element-box">item2</div>
                </div>
         </div>
     </div>
</div>

Answer 1

您似乎必须将<div class="element-box">提供给您的广告div