Jquery Isotope Masonry Layout leaves gap between elements in Bootstrap 3

问题

I am new to web development, especially Jquery and Bootstrap. I am trying to include Jquery Isotope to achieve a Pinterest like layout in one of the pages of my yet to be launched dream website, but I have run into few problems here. Since my html code is too long and I am in kind of in a hurry, I have made these .gif images that explain the problem better than my explanation below:

The html elements I want to apply Isotope to come in a loop and seem to load properly upto only a few iterations. After that I can see a lot of gaps between the elements. If I try to resize the browser window, they rearrange themselves and everything is fine again [Please see image 1 to get a clear picture]. Note: This problem seems to exist only with the divs having Images. The text only elements are perfectly arranged.
I want to the elements to re-arrange themselves if I remove any of them, which doesn't seem to work.
Also, the elements are of variable heights and can be expanded in few conditions. I want the elements to rearrange themselves even in this case. [Please see image 2 to get a clear picture].

if ($('#container').length) {
        $('#container').isotope({
            itemSelector: '.container-item',
            layoutMode: 'masonry'
        });
    }

Please help me solve these problems. Thanks in advance.

回答1:

It's hard to tell from the code and samples provided, but I think these are from default CSS margins or padding from masonry. When you open this in your browser, use your inspect element tool to see what classes are causing those gaps, then override that CSS. Wish I could be more help, but this is the best I can do with what is provided.