使用可变高度的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;
    }
}

超文本标记语言

<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>