Twitter bootstrap 3 使用bootstrap3实现嵌套布局

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

<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>

示例1：
[侧栏]
细胞外
细胞外
细胞外
细胞外
例2：
[侧栏]
细胞内
细胞内
细胞内
细胞内
细胞内
细胞内
细胞内
细胞内

在示例1中，“单元格外部”具有适当的宽度，但在示例2中，“单元格内部”宽度因父行而减小

我正在尝试实现如下布局：

---

您能试试更新的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>

细胞
细胞
边栏
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞
细胞

我尝试使用col-xs-3，但它与col-xs-2单元格的部分不一致。我上传了一个模型布局来解释我的要求。