Isotope and Bootstrap - wrapping on to two columns when i add margin

Question

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!

Answer 1

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 :)

Answer 2

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;}