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

我试图使用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列，但是，如果我没有弄错，引导程序将它包含在12; 那么我的想法是使用position：relative来拉第二个col-sm-7 div。 这个特殊div的大小是可变的（例如，它可以比右边的col-sm-3短），并且我还必须拉出col-sm-10（单独的第一行），所以即使我使用了@媒体在我的CSS中，col-sm-10 div或者重叠或者太远 - 到目前为止并不理想。

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

---

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

---

我终于想出了一个解决方案，可以在不考虑任何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>

链接地址: http://www.djcxy.com/p/88325.html

上一篇: Can't apply bootstrap grid to layout

下一篇: How to make bootstrap 3 fluid layout without horizontal scrollbar