Jquery Isotope 和 Twitter Bootstrap 网格布局

Question

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

我有一个通常的列标记。每个中都有三个列(.span4)。

现在，当我在这些列上调用Isotope时，第三个元素会进入新行，即使在顶部行中也有空间。你能帮忙吗？

我的jQuery代码如下（请忽略jsfiddle上的其他变量）：

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

我已经在jsfiddle上设置了一个示例，演示了这种情况：http://jsfiddle.net/HASg6/

- OriginalEXE

---

似乎是isotope容器的填充引起了问题，当我将其移除时，它似乎表现正常。 - OriginalEXE

Answer 1

我无法确定您的代码出了什么问题，但是您需要调整CSS使Bootstrap和Isotope协调工作。您还可以尝试将所有的Isotope单元格放入一个单一的容器中，而不是行内放置。

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

- Carol Skelly