如何仅使用 bootstrap 3 网格系统和 css 创建砌体效果 [英] How to create the masonry effects with just bootstrap 3 grid system and css

问题描述

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

<div class="col-lg-4">post</div><div class="col-lg-4">更长的柱子会比其他柱子占据更多的高度</div><div class="col-lg-4">post</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>

然后我将在两行之间留下空白，我想要实现的是仅使用 CSS，特别是 Bootstrap 3 网格系统的砌体效果(其中一个帖子填充位于其上方的帖子附近).即:

我知道这可以通过 plugins 来完成，但我想看看是否有更纯粹的(甚至如果它必须是hacky)解决方案.有什么想法吗?

解决方案

我们在一个网站上做了这个，我们所做的是把网格放在垂直的行中.

示例:

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

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

<div>

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>

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:

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.

Example:

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