integrating bootstrap with isotope

问题

In the link below I wanna convert a list of DIVs to 3 columns Grid by adding class span4 of bootstrap (and masonry layout mode). Demo - twitter bootstrap & isotope

$('#grid').on('click', function() {
    $('.item').hide().addClass('span4');
    $('.item:nth-child(3n+1)').css('margin-left', 0); // remove extra margin-lefts
    $('.item').show();
    $('#posts').isotope({
        itemSelector: '.item',
        resizable: false,
        animationEngine: 'best-available'
    });
});
$(window).smartresize(function() {
    $('#posts').isotope('reLayout');
});

but as you can see, 3rd column break into the next line. I tried reduce bootstrap span4 width but that doesn't make any differences.

回答1:

Use the latest version of isotope. integration bug is fixed !

http://isotope.metafizzy.co/

回答2:

Update 2019

Bootstrap 4

Now that Bootstrap 4 uses flexbox you need to use the fitRows layout for Masonry/Isotope: https://www.codeply.com/go/zNeDtV9nLE

Bootstrap 3 (original answer)

The example link you provided is broken. The approach that I use for Bootstrap and Isotope is to use bootstrap-responsive.css and custom media queries (in your CSS) to resize the isotope cells (Bootstrap .span3 DIV) accordingly as the browser viewport changes.

These are the @media queries that I tweaked:

@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width: 352px;
  }
}

@media (min-width: 980px) and (max-width: 1200px) {
  .span3 {
    width: 300px;
  }
}

@media (min-width: 1200px) {
  .span3 {
    width: 270px;
  }
}

Complete Bootstrap / Isotope example on Bootply: http://www.bootply.com/60295

来源：https://stackoverflow.com/questions/16041876/integrating-bootstrap-with-isotope