Jquery Isotope 和 Twitter Bootstrap 网格答案

【问题标题】：Jquery Isotope and Twitter Bootstrap gridJquery Isotope 和 Twitter Bootstrap 网格
【发布时间】：2013-03-26 00:33:35
【问题描述】：

我正在尝试将 jQuery Isotope 与我的 Twitter Bootstrap 网格一起实现，但我被卡住了。

我有一个常用的引导标记列。我有三行（.row-fluid），每行里面有三列（.span4）

现在，当我在上述列上调用 Isotope 时，我得到的是行内的第三个元素进入新行，即使在顶行有空间。你能帮忙吗？

我的 jQuery 是这样的（忽略 jsfiddle 上的其他变量）：

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

我已经在 jsfiddle 上设置了发生这种情况的示例：http://jsfiddle.net/HASg6/

【问题讨论】：

同位素容器上的填充似乎会导致问题，当我将其移除时，它似乎表现良好。

标签： jquery twitter-bootstrap jquery-isotope

【解决方案1】：

我无法确定您的代码到底出了什么问题，但您确实需要修改 CSS 以使 Bootstrap 和 Isotope 能够很好地协同工作。您可能还想尝试将所有同位素细胞放入一个容器中，而不是行。

这里是 Bootstrap 和 Isotope 的演示：http://www.bootply.com/60295 这个演示还使用媒体查询来确保根据屏幕大小调整图像大小。

【讨论】：