Question

我有一个带有无序列表的页面，在该列表中有许多列表项，它们属于各种类别。每个列表项用Bourbon Neat填充12列12列网格。

我希望能够通过菜单按类别过滤每个列表项。我发现过滤项目的最佳方法是使用Isotope.js。不幸的是，当我尝试使用同位素时，它会覆盖波本威士忌的整齐布局。有没有办法将同位素与波本威士忌一起使用？

我已经在这里使用相关代码创建了一个codepen：

http://codepen.io/patrickaltair/pen/MaMeZX?editors=001

$('.grid').isotope({
        itemSelector: '.wp-project',
    });

    $('#all').click(function(){
        $('.grid').isotope({ filter: '*' });
    });

    $('#mountain').click(function(){
        $('.grid').isotope({ filter: '.Mountain' });
    });

    $('#trees').click(function(){
        $('.grid').isotope({ filter: '.Trees' });
    });

    $('#desert').click(function(){
        $('.grid').isotope({ filter: '.Desert' });
    });

您可以看到如果删除js然后元素显示为应该如何显示。

我找到了post 这让我觉得有可能。

Answer 1

是的，有可能。整齐的类/ mixin被覆盖，因此，在响应式布局中，您必须仅使用项目宽度的％而不是@include span-columns（）mixin。我使用了这个解决方案：http://isotope.metafizzy.co/layout-modes/fitrows.html。它对我有用。也适用于排水沟。我创建了一个类来计算项目之间的正确magin。

如何使用Bourbon Neat与Isotope.js？

1 个答案: