引导程序中的嵌套列

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>

Answer 2

这是我的解决方案。请参阅Frederic Le Feurmou的回答 1. 删除嵌套
2.将float:right!important @media (min-width: 992px)添加到第二个div。

<div class="col-md-8" style="background:yellow;height:100px;"></div>
<div class="col-md-4 float" style="background:red;height:200px;"></div>
<div class="col-md-4" style="background:green;height:200px;"></div>
<div class="col-md-4" style="background:blue;height:100px;"></div>
<div class="col-md-8" style="background:purple;height:100px;"></div>

<强> CSS ：

@media (min-width: 992px) 
  { 
    .float
    {
      float:right!important;
    } 
  }

链接到bootply：http://www.bootply.com/Pgt6WdBhtt