Float issues when combining Isotope and Bootstrap

Question

My WordPress theme is using Bootstrap, and when I combine that with Isotope, it works fine if all elements are same size. But as on of the key functions with Isotope, is the possibility of different sizes in the masonry, I have some featured posts that are 6 columns, instead of 3.

This plays very nicely with Isotope, except when the first post has double size. This breaks the whole Isotope masonry. However, if the placing of the double sized grid item is in 2nd position or lower, it plays extremely nice.

Anyone experienced this before, and know of a fix?

I have also seen the same behaviour with a code example I found online:

All same sized: http://www.bootply.com/89551 One different sized (1st position): http://www.bootply.com/WGTYFKjifZ One different sized (2nd position): http://www.bootply.com/Rx9n79v0Q3

Answer 1

Here is an option that may be workable. First update to Isotope v2.2, ( you need to load imagesloaded.js separately with this version), remove the isotope css transitions in your css and then use a grid-sizer div the same width as your .col-md-3 (25%). You could also use .col-md-3 as your grid sizer. Here is a Demo

$('#posts').imagesLoaded( function(){
$('#posts').isotope({
  itemSelector : '.item',
  masonry: {
// set to the element
columnWidth: '.grid-sizer'
}
});
});

css

.grid-sizer{width:25%}

Add the grid-sizer to your #posts

 <div id="posts" class="row">
   <div class="grid-sizer"></div>
    <div id="1" class="item col-md-6">
        <div class="well">
        <h4><a href="#" target="_blank">Bootstrap</a></h4>

            <img class="thumbnail img-responsive" src="//lorempixel.com/150/180">
            <div class="info"> <span class="badge">90</span>
            <span class="badge">42</span>

            </div>
        </div>
     </div>