Question

我想使用bootstrap3进行这样的布局：

但是网格系统似乎同一行中的不同列可以具有不同的高度，或者它可能显示为白色块。

我的代码如下，但是如果我更改右侧列的高度值，整行会崩溃！

<div class="container">
<div class="row clearfix">
    <div class="col-md-6 column" style="background:red; height:40%;">test
    </div>
    <div class="col-md-6 column" style="background:blue;">test
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-6 column" style="background:yellow; height:50%;">test
    </div>
    <div class="col-md-6 column" style="background:green;">tset
    </div>
</div>
<div class="row clearfix">
    <div class="col-md-12 column" style="background:gray; height:10%;">test
    </div>
</div>

任何人都可以帮助我，谢谢！

Answer 1

不确定这是不是你在想什么，但也许这是一个很好的起点：

<div class="container">
    <div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 column">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:red; height:40px;">

        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:green; height:20px;">

        </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 column" >
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:blue; height:20px;">

        </div>
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:yellow; height:30px;">

        </div>
    </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 column" style="background:grey; height:30px;">

        </div>
    </div>    
</div>

jsFiddle：http://jsfiddle.net/qG787/

在同一行问题中布置不同高度的不同cols

1 个答案: