html - Jquery 同位素 masonry 布局在 Bootstrap 3 中的元素之间留下间隙

Question

我是网络开发新手，尤其是 Jquery 和 Bootstrap。 我正在尝试包含 Jquery Isotope 以在我尚未启动的梦想网站的其中一个页面中实现类似 Pinterest 的布局，但我在这里遇到了一些问题。由于我的 html 代码太长而且我有点赶时间，所以我做了 these比我下面的解释更能解释问题的 .gif 图像:

1. 我想应用 Isotope 的 html 元素进入一个循环，并且似乎只正确加载了几次迭代。之后我可以看到元素之间有很多缝隙。如果我尝试调整浏览器窗口的大小，它们会重新排列自己，一切都会再次正常 [请查看图片 1 以获得清晰的图片]。 注意:这个问题似乎只存在于有图像的 div 中。纯文本元素排列完美。
2. 我希望元素在我删除其中任何一个时重新排列它们自己，但这似乎不起作用。
3. 此外，元素的高度可变，可以在少数情况下展开。即使在这种情况下，我也希望元素重新排列。 [请看图 2 以获得清晰的图片]。

JS

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

请帮我解决这些问题。提前致谢。

Answer 1

很难从提供的代码和示例中分辨出来，但我认为这些是来自默认的 CSS 边距或来自 masonry 的填充。当您在浏览器中打开它时，使用您的检查元素工具查看哪些类导致了这些间隙，然后覆盖该 CSS。希望我能提供更多帮助，但这是我所能提供的最好的帮助。