Jquery Isotope和Twitter Bootstrap网格 [英] Jquery Isotope and Twitter Bootstrap grid

问题描述

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

I am trying to implement jQuery Isotope together with my Twitter Bootstrap grid and I am stuck.

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

I have a usual bootstrap markup for columns. I have three rows (.row-fluid), inside each there are three columns (.span4)

现在，当我在所说的列上调用Isotope时，我得到了什么是行内的第三个元素在新行中，即使在顶行有空格。你可以帮忙吗。

Now, when I call Isotope on the said columns, what I get is that the third element inside of a row goes in the new line, even though there is space for it in the top line. Can you help out.

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

My jQuery is this (ignore other variables on jsfiddle):

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

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

I have set up the example where this is happening on jsfiddle: http://jsfiddle.net/HASg6/

推荐答案

我无法确定你的代码究竟出了什么问题，但你确实需要使用CSS来让Bootstrap和Isotope很好地协同工作。您也可以尝试将所有同位素单元格放入单个容器中，而不是行。

I'm unable to determine what's exactly wrong with your code, but you do need to fiddle with the CSS to get Bootstrap and Isotope to play nicely together. You also may want to try putting all of your Isotope cells into a single container, instead of rows.

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

Here is a demo of Bootstrap and Isotope: http://www.bootply.com/60295 This one also uses media queries to make sure the images are resized responsively for screen size.

这篇关于Jquery Isotope和Twitter Bootstrap网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！