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

【问题标题】：Can't apply bootstrap grid to layout无法将引导网格应用于布局
【发布时间】：2014-06-19 20:17:36
【问题描述】：

我正在尝试使用 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 列，但是，如果我没记错的话，bootstrap 会在 12 处包装它；然后我的想法是使用 position: relative 拉出第二个 col-sm-7 div。这个特定 div 的大小是可变的（例如，它可能比右边的 col-sm-3 短）而且我还必须拉 col-sm-10（单独的第一行），所以即使我使用了 @在我的 CSS 中，col-sm-10 div 要么重叠，要么太远 - 到目前为止并不理想。

有人对此有一个优雅的解决方案吗？

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案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>

【讨论】：

嘿，感谢您的快速回答 - 我尝试了您的代码，但不完全是我的想法。这是向您展示我的意思的 bootply：bootply.com/royalsflush/nukhIYzr3m
我正在寻找不使用 JS 或定位的东西，因为随着屏幕大小和内容的变化，它会产生意想不到的错误（例如重叠）；但再次感谢您抽出宝贵时间回答。

【解决方案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>

【讨论】：