I think that the problem is that the total width of 3 items in row is more than the width of your main div (which has the id 'posts'). Every item has a width of 33,3% (from bootstrap css class .col-md-4) so try to override this and give your items a certain width (try 288px, i tested it and it looks nice). Hope it helps :)
Isotope and Bootstrap - wrapping on to two columns when i add margin
-
28-06-2023 - |
题
I'm having an issue here;
http://roblb.devour.org/march2014/
Basically, what's happening is that as soon as I add any CSS to put some form of padding around the elements, it knocks things out to two columns, rather than three for the main images.
Removing the attribute;
.project {padding-bottom:0px; padding-right:0px; padding-left:0px; margin:1px;}
Makes the layout go to the correct three columns. I know I'm missing something, but i think I'm having one of those moments!
解决方案
其他提示
Try to apply a padding (or border) of 1px instead of margin.
Bootstrap use box-sizing:border-box
, see: Why did Bootstrap 3 switch to box-sizing: border-box?. padding and border are include with the width and margin not, so i expect the margin of 1 pixels breaks your layout.
Recently i applied the jQuery masonry on bootstrap: https://github.com/bassjobsen/jbst-masonry-theme. Changes needed for the .container > .row
which holds the masonry:
.container {padding:0;}
.container > .row {margin:0;}