引导网格布局答案

【问题标题】：Bootstrap grid-layout引导网格布局
【发布时间】：2014-07-04 09:51:36
【问题描述】：

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

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

这可能吗？块之间也应该有一些空间，所以背景图片应该填满这些空间。

请帮帮我。

【问题讨论】：

标签： css twitter-bootstrap responsive-design grid

【解决方案1】：

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

【讨论】：

感谢您的回答，这是另一个问题。如果我手动设置高度，页面仍然响应吗？我不这么认为。

【解决方案2】：

您要做的是将 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)}}

【讨论】：

感谢您的帮助。您能否查看我的代码并进行更正，或者只是给我您的建议以获取最好的和简单的代码，因为我认为我因为缺乏经验而变得复杂：bootply.com/Tv1Q3khM4x
嗯，这有点难以分辨（如果 div 中有文本而不是图像会更容易，所以我可以看到它有多灵活），但它看起来确实可以响应我能看到。

【解决方案3】：

Rachel 的想法是对的。你真的只需要将行嵌套到一个容器中，然后使用 CSS 来调整高度。

【讨论】：

我知道你还不能发表评论——但这不是一个实际的答案！请等到您有足够的代表并避免发布这样的答案，以免您被否决

【解决方案4】：

我认为最有效的方法是简单地使用单行和三列。您的 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>

【讨论】：

您的小提琴与您的答案完全不同。
你能粘贴正确的小提琴网址吗？我测试了它，它几乎是好的:)
更新了链接，很抱歉。