html - 使用具有可变高度的 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>