Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other

问题

The HTML scheme is following:

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.item CSS style:

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.

Thank you

回答1:

You can use CSS 3 column-width and column-gap like this..

http://www.bootply.com/118335

回答2:

I run into the exact same problem and I found this one that worked for me.

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.

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.

来源：https://stackoverflow.com/questions/22148063/making-a-pinterest-like-grid-with-bootstrap-the-boxes-are-not-displayed-right-b