小编Typ*_*ism的帖子

如何使用bootstrap 3网格系统和css创建砌体效果

我的问题是我想使用bootstrap 3网格系统以块格式显示数据,但是我不希望从高度发生的恼人的空白间隙被限制在上面的行.例如,如果我这样做:

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>
Run Code Online (Sandbox Code Playgroud)

那么我将留下两行之间的空白,我想要实现的是一个砌体效果(后填充位于其上方的帖子附近),只使用CSS,特别是bootstrap 3网格系统.IE:

在此输入图像描述

我知道这可以通过插件完成,但我想看看是否有更纯粹的(即使它必须是hacky)解决方案.有任何想法吗?

css twitter-bootstrap masonry

9
推荐指数
3
解决办法
5万
查看次数

标签 统计

css ×1

masonry ×1

twitter-bootstrap ×1