如何使用波本邦整潔與Isotope.js？

Question

我有一個頁面有一個無序列表，並在該列表中列出了許多列入各種類別的列表項。每個列表項目用波旁整潔填充12列網格的6列。

我希望能夠按菜單過濾每個列表項。我發現過濾項目的最佳方式是使用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

是的，這是可能的。整齊的class/mixin被覆蓋，因此，在響應式佈局中，只能使用項目寬度的％而不是@include span-columns（）mixin。我使用這個解決方案：http://isotope.metafizzy.co/layout-modes/fitrows.html。它適合我。也爲排水溝。我創建了一個類來計算項目之間的正確大小。