使用可变高度的Bootstrap div创建网格

Question

我有一个div网格（使用Bootstrap3）（见下图）。我希望它们像网格一样，但如果它们不是水平排列的，它们通常不会像网格一样排列。

我认为这将是一个简单的解决方案，我仍然认为它可能是，但对于我的生活，我不能按照我希望的方式工作。

我已经尝试了很多组合添加左拉和拉右......等等，但是再一次 - 没有任何效果。

我的意思的快速示例 - 具有动态变化高度的div网格：

<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>

Answer 1

我最后只使用@media查询。我添加了“col-right”类（不是一个定义的类 - 只是组成）应该在大型2列版本的右侧，并且在任何1200px（lg）及以上，让它们向右浮动。

这允许其他人（默认为float:left;）在他们旁边包裹。

<强> CSS：

@media (min-width: @screen-lg) {
    .col-right {
        float: right;
    }
}

<强> HTML

<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>

Answer 2

问题在于您使用列（.col-lg-6）的方式。您应该只使用两列，然后在它们之间划分内容。

这样的事情：

<div class="row">
    <div class="col-lg-6">
        <p>
            Lorem ipsum<br>
            Lorem ipsum<br>
        </p>
        <p>
            Lorem ipsum<br>
            Lorem ipsum<br>
            Lorem ipsum<br>
        </p>
    </div>

    <div class="col-lg-6">
        <p>
            Lorem ipsum<br>
            Lorem ipsum<br>
            Lorem ipsum<br>
        </p>
        <p>
            Lorem ipsum<br>
        </p>
    </div>
</div>

<强> jsFiddle