如何仅使用 bootstrap 3 网格系统和 css 创建砌体效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27550094/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create the masonry effects with just bootstrap 3 grid system and css
提问by Typhomism
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:
我的问题是我想使用 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>
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:
然后我将在两行之间留下空白，我想要实现的是仅使用 CSS，特别是引导程序 3 网格系统的砌体效果（其中一个帖子填充位于其上方的帖子附近）。IE：
I know this can be done with pluginsbut i want to see if theres a more pure (even if it has to be hacky) solution. Any ideas?
我知道这可以通过插件来完成，但我想看看是否有更纯粹的（即使它必须是 hacky）解决方案。有任何想法吗？
回答by Aibrean
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>
回答by maioman
In Bootstap .rowelement is used for clearing floats of the div-blocks / col it contains (in your ex. col-lg-4);
在 Bootstap .row元素中，用于清除它包含的 div-blocks / col 的浮点数（在您的前任中col-lg-4）；
So it's basically impossible to have elements in different rows stand next to each other, you necessarily need to change the markup;
所以基本上不可能让不同行的元素彼此相邻，你必须改变标记；
On the other hand using bootstrap responsive column system could be helpful for making a CSS-Masonry effect:
you can try placing all "col-items" that you want to make the masonry effect on inside one row,
displaying as inline-block(plus maybe some other little adjustments ..) should do the trick (this is the way to go for if you're stuck only with CSS..);
另一方面，使用引导响应列系统可能有助于制作 CSS-Masonry 效果：
您可以尝试将所有要制作砌体效果的“col-items”放在一行内，显示为 inline-block(plus也许其他一些小调整 ..) 应该可以解决这个问题（如果你只使用 CSS 的话，这是要走的路..）；
In conclusion remember that Masonry was born and remains a JavaScript grid layout library, so even if you can make it work with CSS I suggest you to use JS .
总之，请记住 Masonry 诞生并仍然是一个 JavaScript 网格布局库，因此即使您可以使用 CSS 使其工作，我建议您使用 JS 。
a thousand thanks to Desandro for this awesome idea;
一千感谢 Desandro 提出的这个很棒的想法；
回答by Max
In Bootstrap 4 you can use .card-columns, see here: https://v4-alpha.getbootstrap.com/components/card/
在 Bootstrap 4 中，您可以使用.card-columns，请参见此处：https: //v4-alpha.getbootstrap.com/components/card/
Though I would recommend using isotopeas JS offers more control and better compatibility than CSS.
虽然我建议使用同位素，因为 JS 比 CSS 提供更多的控制和更好的兼容性。
回答by Ouahib Abdallah
i did a simple masonry grid that receive images from DB , by just css like this :
我做了一个简单的砖石网格，它从数据库接收图像，就像这样：
<div class="container">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
<div class="image-gallerie">
<img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />
</div>
</a>
</div>
</div>
.container {
-moz-column-width: 35em;
-webkit-column-width: 35em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.image-gallerie {
width: 100%;
}
.image-gallerie img{
width: 100%;
height: 100%;
margin-top: 15px;
margin-bottom: 10px;
}
