Jquery Isotope Masonry Layout оставляет зазор между элементами в Bootstrap 3

Я новичок в веб-разработке, особенно в Jquery и Bootstrap. Я пытаюсь включить Jquery Isotope, чтобы добиться макета, похожего на Pinterest, на одной из страниц моего еще не запущенного веб-сайта мечты, но здесь я столкнулся с несколькими проблемами. Поскольку мой html-код слишком длинный и я тороплюсь, я сделал эти .gif изображения, которые объясняют проблему лучше, чем мое объяснение ниже:

1. HTML-элементы, которые я хочу применить к Isotope, зацикливаются и, похоже, правильно загружаются всего за несколько итераций. После этого я вижу много промежутков между элементами. Если я попытаюсь изменить размер окна браузера, они перестроятся, и все снова будет хорошо [Пожалуйста, посмотрите на изображение 1, чтобы получить четкое изображение]. Примечание. Эта проблема возникает только в том случае, если элементы div содержат изображения. Элементы только текста идеально расположены.
2. Я хочу, чтобы элементы перестраивались, если я удалю любой из них, что, похоже, не работает.
3. Кроме того, элементы имеют переменную высоту и могут быть расширены в нескольких условиях. Я хочу, чтобы элементы перестраивались даже в этом случае. [Пожалуйста, см. изображение 2, чтобы получить четкое изображение].

JS

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

Пожалуйста, помогите мне решить эти проблемы. Заранее спасибо.