无法将引导网格应用于布局

Question

我尝试使用Bootstrap 3编写以下布局 - 它是网格的10个网格的子网站（其他2个用于侧边栏，这不是问题），数字表示特定块跨越多少：

我的第一个想法是使用推/拉类，但是我尝试了大量的组合并且没有一个成功，我怀疑它是因为那里可能有3行，但没有一个跨越所有10行列，所以我必须找到其他配置，不使用特定块中的行。 然后我尝试了不同的配置：

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-3"></div>
</div>
<div class="row">
    <div class="col-sm-10"></div>
</div>

我知道一行应该只有12个cols，但是，如果我没有弄错的话，bootstrap将它包裹在12;然后我的想法是使用position：relative来拉出第二个col-sm-7 div。这个特殊div的大小是可变的（例如，它可以比右边的col-sm-3短）并且我还必须拉动col-sm-10（单独的第一行），所以即使我使用了@我的CSS中的媒体，col-sm-10 div要么重叠要么太远 - 到目前为止并不理想。

有没有人有这个优雅的解决方案？

Answer 1

        <div class="container">
    <div class="row">
        <div class="col-md-4 number1">3</div>
        <div class="col-md-8 number2">7</div>

        <div class="col-md-6 number3">4</div>
        <div class="col-md-2 number4">7</div>
        <div class="col-md-9 number5">3</div>
    </div>
    <div class="row">
        <div class="col-md-12 number6">10</div>
    </div>
     </div>

/*** CSS ***/
    <style>
    .number1{ background:#036; min-height:100px; color:#FFF;}
    .number2{ background:#09C; min-height:50px;}
    .number3{ background:#9C0; min-height:50px;}
    .number4{ background:#C03; min-height:150px;}
    .number5{background: none repeat scroll 0 0 #6666FF;
        min-height: 100px;
        position: absolute;
        top: 100px;}
    .number6{ background:#F6F; min-height:100px;}


    </style>

Answer 2

我终于找到了一个解决方案，无需为任何div设置高度，这是我的主要问题。它非常简单：

<div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-7"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-3 pull-right"></div>
    <div class="col-sm-7"></div>
</div>
<div class="row">
    <div class="col-sm-10"></div>
</div>