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

发布时间：2020-12-14 23:24:49 所属栏目：资源来源：网络整理

导读：我有一个div网格(使用Bootstrap3)(见下图).我希望它们像网格一样,但如果它们不是水平排列的,它们通常不像网格一样排列. 我认为这将是一个简单的解决方案,我仍然认为它可能是,但对于我的生活,我无法按照我希望的方式工作. 我已经尝试了很多组合添加左拉和拉右

我有一个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>

解决方法

我最后只使用了@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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!