如何创建砖石效果与只是bootstrap 3网格系统和CSS [英] How to create the masonry effects with just bootstrap 3 grid system and css

问题描述

我的问题是，我想使用bootstrap 3网格系统以块格式显示数据，但我不想让从高度发生的恼人的空白间隙约束到上面的行。例如，如果我这样做：

My issue is that i want to display data in a block format using the bootstrap 3 grid system however i dont want the annoying whitespace gaps that happen from the height being constrained to the above row. For example, If i do:

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

那么我将留下两行之间的空白，我想实现的是一个砖石效果（其中后填充坐在上面的帖子附近），只使用CSS，具体的bootstrap 3网格系统。 IE：

then i will be left with whitespace between the two rows, what i am trying to achieve is a masonry effect (where a post fill sit near the post above it) with only using CSS, Specifically the bootstrap 3 grid system. I.E:

>

我知道这可以通过插件完成，但我可以想看看是否更纯净（即使它必须是hacky）解决方案。任何想法？

I know this can be done with plugins but i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?

推荐答案

我们在一个网站上做了，我们做的是把网格放在垂直的行。

We did this on a site, and what we did was put the grid in vertical rows.

示例：

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>

这篇关于如何创建砖石效果与只是bootstrap 3网格系统和CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！