Jquery Isotope and Twitter Bootstrap grid

问题

I am trying to implement jQuery Isotope together with my Twitter Bootstrap grid and I am stuck.

I have a usual bootstrap markup for columns. I have three rows (.row-fluid), inside each there are three columns (.span4)

Now, when I call Isotope on the said columns, what I get is that the third element inside of a row goes in the new line, even though there is space for it in the top line. Can you help out.

My jQuery is this (ignore other variables on jsfiddle):

pGrid.isotope({
    hiddenStyle  : { opacity : 0 },
    visibleStyle : { opacity : 1 }, 
    itemSelector : '.span4',
    layoutMode   : 'fitRows',
    resizable: false
});

I have set up the example where this is happening on jsfiddle: http://jsfiddle.net/HASg6/

回答1:

I'm unable to determine what's exactly wrong with your code, but you do need to fiddle with the CSS to get Bootstrap and Isotope to play nicely together. You also may want to try putting all of your Isotope cells into a single container, instead of rows.

Here is a demo of Bootstrap and Isotope: http://www.bootply.com/60295 This one also uses media queries to make sure the images are resized responsively for screen size.

来源：https://stackoverflow.com/questions/15627338/jquery-isotope-and-twitter-bootstrap-grid