Question

我已经搜索了所有但无法找到任何方法来使用bootstrap实现以下网格：http://oi60.tinypic.com/2r404rc.jpg

这篇文章很接近，但这不是我想要的：How can I get a Bootstrap column to span multiple rows?

任何想法是否可以使用bootstrap来实现？或者我应该寻找经典的CSS方式。

编辑：html必须遵循此顺序

<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>

Answer 1

试试这个

<div class="row>
    <div class="col col-lg-8>
            <!-- col 1-->
        <div class="row">
            <!-- row 1-->
        </div>
        <div class="row>
            <!-- row 2-->
        </div>
    </div>
    <div class="col col-lg-4">
            <!-- col 2-->
    </div>
</div>

Answer 2

你应该使用列嵌套

这是一个例子

http://www.bootply.com/HjJxS7jKHM

或者

<div class="row">
<div class="col-md-6 blue">
    <div class="row">
        <div class="col-md-12 short-div border">Span 6</div>
        <div class="col-md-12 short-div border">Span 6</div>
    </div>
</div>
<div class="col-md-6 green tall-div border">Span 6</div>
</div>
<div class="row">
  <div class="col-md-6 short-div green border">4</div>
  <div class="col-md-6 short-div blue border">5</div>
</div>

我怎样才能获得bootstrap网格系统第二列占用两行空间

2 个答案: