如何使用Bourbon Neat with Isotope.js

Question

我有一个页面，上面有一个无序的列表，列表中有许多列表项，它们分为不同的类别。每个列表项用Bourbon Neat填充12列网格中的6列。

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

我用这里的相关代码创建了一个代码笔：

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，那么元素就会显示出来

我发现了这个帖子这让我觉得这是可能的。

Answer 1

是的，这是可能的。整洁的class/mixin被覆盖了，所以在响应布局中，你必须只使用%来表示项的宽度，而不是@include span-columns（）mixin。我使用了以下解决方案：http://isotope.metafizzy.co/layout-modes/fitrows.html.它对我有好处，对排水沟也有好处。我创建了一个类来计算项目之间的正确magin。