twitter-bootstrap - Bootstrap网格系统布局2 : 1

Question

如何创建具有以下设计的网格

--------------------  -------------------------------
|    Content 1     |  |                             |
------  hr ---------  |          Content 3          |
|    Content 2     |  |                             |
--------------------- -------------------------------

我有这段代码，但它会将内容 2 推到内容 3 的下方

<div class="col-md-5 well">
<form class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            //text
        </div>
        <div class="form-group">
            //text
        </div>
    </div>
</form>
</div>
<div class="col-md-7 well">
  <div style="height: 600px;"></div>
</div>
<hr style=" border: 0;
        height: 1px;
        background: #333;
        background-image: linear-gradient(to right, #ccc, #333, #ccc);">
<div class="well pre-scrollable" style="max-height: 350px !important;">
   hello 
</div>

注意

Content 1 is the div with form
Content 2 is the div with hello inside
Content 3 is the div with height specified

在互联网上搜索但找不到任何指南..非常感谢您提供的任何帮助。谢谢 :)

Answer 1

试试这个，这应该会给你你正在寻找的结果:

<div class ="row">
  <div class = "col-lg-4">
    <div class = "col-lg-12">
      Content 1
    </div>
    <hr />
    <div class = "col-lg-12">
      Content 2
    </div>
  </div>
  <div class = "col-lg-8">
    Content 3
  </div>
</div>