Bootstrap网格布局

Question

我是bootstrap网格线系统的新手，所以当我尝试创建（高级？）gridview时，我被困住了：

所以我的问题是我不知道如何在行中组织块，因为某些块必须具有不同的高度，例如块5的高度应该与块3和2.一起具有相同的大小。

这甚至可能吗？块之间也应该有一些空间，因此背景图像应该填充这些空间。

请帮帮我。

Answer 1

你要做的是将div 2,3和4放在他们自己的容器div中（使用类.col-md-3），将5和6放在另一个容器div中（使用类.col- MD-3）。使div 1具有.col-md-6类。

编辑：您应该使用媒体查询在桌面上将其设置为固定高度，然后在移动时使用灵活的高度。

@media screen and (max-width: 980px) { #div2 { height: 500px; (or whatever)}}

Answer 2

我认为最有效的方法是简单地使用包含三列的单行。您的div可以堆叠在适当的列中，您可以为每个列定义高度。你可以在这里看到它：http://jsfiddle.net/StSmith/Z9SpM/1/

<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <div id="box1">1</div>
    </div>
    <div class="col-lg-3">
      <div id="box2">2</div>
      <div id="box3">3</div>
      <div id="box4">4</div>
    </div>
    <div class="col-lg-3">
      <div id="box5">5</div>
      <div id="box6">6</div>
    </div>
</div>

Answer 3

一种简单的方法是按照列出的顺序声明div，然后应用简单的float: left。如果你手动定义每个div的高度，它应该都适合！

Answer 4

雷切尔有正确的想法。你真的只需要将行嵌套到容器中，然后使用CSS来调整高度。