Bootstrap网格系统布局2:1

时间:2016-10-06 10:29:42

标签: twitter-bootstrap

如何使用以下设计创建网格

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

搜索互联网但未找到任何指南.. 任何帮助真的很感激。谢谢:)

1 个答案:

答案 0 :(得分:2)

试试这个,这应该会给你你想要的结果:

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