使用Bootstrap 3实现嵌套布局

Question

我正在尝试使用Bootstrap 3实现递归布局，但每次将其放入容器/行时，单元格的宽度都在减小。

<h4>Example 1:</h4>
<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-xs-4">[SIDEBAR]</div>
            <div class="col-xs-2">Cell Outer</div>
            <div class="col-xs-2">Cell Outer</div>
            <div class="col-xs-2">Cell Outer</div>
            <div class="col-xs-2">Cell Outer</div>
        </div>
    </div>
</div>
<h4>Example 2:</h4>
<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-xs-4">
                [SIDEBAR]
            </div>
            <div class="col-xs-8">
                <div class="row">
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                    <div class="col-xs-2">Cell In</div>
                </div>
            </div>
        </div>
    </div>
</div>

http://jsfiddle.net/firozansari/jXt69/3/

在示例1中，“Cell Outer”具有适当的宽度，但在示例2中，由于父行，“Cell In”宽度减小。

我正在尝试实现这样的布局：

Answer 1

你可以试试更新的HTML吗？

<div class="container">
    <div class="content">
        <div class="row">
            <div class="col-xs-4">
                <div class="row">
                    <div class="col-xs-6">CELL</div>
                    <div class="col-xs-6">CELL</div>
                    <div class="col-xs-12">SIDEBAR</div>
                </div>
            </div>
            <div class="col-xs-8">
                <div class="row">
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                </div>
                <div class="row">
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                </div>
                <div class="row">
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                </div>
                <div class="row">
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                    <div class="col-xs-3">CELL</div>
                </div>
            </div>
        </div>
    </div>
</div>