twitter-bootstrap-3 - 使用 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>