Html 使用 Bootstrap 制作类似 Pinterest 的网格：这些框不会显示在彼此的正下方
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22148063/
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
Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other
提问by user984621
The HTML scheme is following:
HTML 方案如下：
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.itemCSS style:
.itemCSS样式：
float: left;
And the result:
结果：
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block;instead of float: left;, but the result was basically the same.
但是白框并没有一个接一个地对齐——问题出在哪里？我也尝试过使用display: inline-block;代替float: left;，但结果基本相同。
Thank you
谢谢
回答by Zim
You can use CSS 3 column-widthand column-gaplike this..
您可以使用 CSS 3column-width并column-gap像这样..
http://www.bootply.com/118335
http://www.bootply.com/118335
回答by Ray
I run into the exact same problem and I found this one that worked for me.
我遇到了完全相同的问题，我发现这个对我有用。
https://github.com/kudago/waterfall
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
它仅依赖于 js 而不是 css，尽管我仍在使用引导程序进行其他样式。我还使用 jquery.infinitescroll.js 来动态加载项目，在项目被附加后，瀑布会发挥它的魔力并将所有内容都放置到位。
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
我发现的唯一故障是有时项目可能会垂直重叠，只要您继续向下滚动，它们就会被正确放置。我不确定为什么会这样，有点烦人，但直到我找到更好的东西。
Hope this helps.
希望这可以帮助。
