html - Bootstrap 中的嵌套列

Question

我如何在 Bootstrap 中实现这一点。

我能够使用以下代码创建除最后一个 col-md-8 之外的所有内容:

    <div class="aaa">
        <div class="col-md-8">
            <div class="col-md-12" style="background:yellow;height:100px;padding:20px;">

            </div>
            <div class="col-md-6" style="background:red;height:200px;padding:20px;">

            </div>
            <div class="col-md-6" style="background:blue;height:100px;padding:20px;">

            </div>
        </div>
        <div class="col-md-4">
            <div class="col-md-12" style="background:orange;height:200px;padding:20px;">

            </div>
        </div>
    </div> 

Answer 1

我想出了一个解决办法。你必须漂浮你的积木之一。

这是我的解决方案:

http://jsfiddle.net/8tvvrecw/2/

<div class="row" style="position:relative">
    <div class="col-xs-8" style="background:red; height:100px"></div>
    <div class="col-xs-4" style="position:absolute; right:0; background:purple; height:200px"></div>
</div>


<div class="row">
    <div class="col-xs-4" style="background:black; height:200px"></div>

    <div class="col-xs-8">
        <div class="row">
            <div class="col-xs-6" style="background:blue; height:100px"></div>
        </div>

        <div class="row">
            <div class="col-xs-12" style="background:green; height:100px"></div>
        </div>
    </div>
</div>