如何将 Bourbon Neat 与 Isotope.js 一起使用？答案

【问题标题】：How to use Bourbon Neat with Isotope.js?如何将 Bourbon Neat 与 Isotope.js 一起使用？
【发布时间】：2015-11-26 00:27:24
【问题描述】：

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

我希望能够使用菜单按类别过滤每个列表项。我发现过滤项目的最佳方法是使用 Isotope.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，那么元素将如何显示为应有的样子。

我找到了这个post 这让我觉得这是可能的。

【问题讨论】：

标签： jquery jquery-isotope bourbon neat

【解决方案1】：

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

【讨论】：