Bootstrap左边两行,右边一行 [英] Bootstrap two rows on the left and one on the right
本文介绍了Bootstrap左边两行,右边一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想使用bootstrap网格系统创建这样的东西:
I want to create something like this using the bootstrap grid system:
但我似乎无法将COLUMN1和COLUMN2一个接一个地放置而不会在它们之间产生间隙(由于第3栏的高度):
But I can't seem to place COLUMN1 and COLUMN2 one after the other without creating a gap between them (due to COLUMN 3's height):
以下是我尝试过的代码示例(我不允许发布完整的实际代码):
Here is a code sample of what I've tried (I am not allowed to post the full, actual code):
<div class="row">
<div id="header" class="col-md-4">
COLUMN 1
</div>
<div class="col-md-8" style="background:url('poze/power.jpg'); height:300px">
COLUMN 3
</div>
</div>
<div class="row" id="row_cont">
<div class="col-md-4">
COLUMN 2
</div>
...all the rest
</div>
推荐答案
我认为这就是你所需要的。单击整页以查看结果。
I think this is what you need. Click Full Page to see the result.
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div style="background:red; height:100px">Column 1</div>
<div style="background:blue; height:200px">Column 2</div>
</div>
<div class="col-md-8" style="background:yellow; height:300px">Column 3</div>
</div>
这篇关于Bootstrap左边两行,右边一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文