基礎均衡器插頭+ BS 3.2？

Question

嘗試使用均衡器插頭，但ID不起作用，並且沒有錯誤。它看起來像http://goo.gl/OvKy1g。這是一個頁面http://goo.gl/INMqUL。我是否需要包含一些CSS。

Answer 1

您可以將Foundation Equalize插件與Twitter Bootstrap一起使用，但您需要做一些事情才能使其工作。

DEMO

首先，你的原則問題是，foundation.js正在尋找相應的foundation.css。由於您使用的是Twitter Bootstrap作爲基礎樣式，因此您可能不希望處理所有潛在的樣式衝突，或讓用戶下載另一個大型CSS文件。真的所有需要​​的是基礎版本和命名空間的引用，因此只需添加以下到你的CSS：

meta.foundation-version { 
    font-family: "/5.4.5/"; 
} 
meta.foundation-data-attribute-namespace { 
    font-family: false; 
} 

的第二個問題是您的標記。您將data-equalizer-watch屬性應用於包含.col-sm-4元素，但您的子元素的邊界類別爲latest-news-item。因此，改變你的標記是：

<div class="row" data-equalizer> 
    <div class="col-sm-4" > 
     <div class="latest-news-item" data-equalizer-watch> 
     <!--Your content here--> 
     </div> 
    </div> 
    <div class="col-sm-4" > 
     <div class="latest-news-item" data-equalizer-watch> 
     <!--Your content here--> 
     </div> 
    </div> 
    <div class="col-sm-4" > 
     <div class="latest-news-item" data-equalizer-watch> 
     <!--Your content here--> 
     </div> 
    </div> 
</div> 

正如你可以在演示中看到，我能得到你的測試頁面，這些變化的工作，但我也能大幅降低foundation.js文件大小通過使用Custom option on the Foundation Download頁面，並只使用均衡插件構建js版本。縮小版本是31K。如果您不打算使用任何其他基礎插件，則可以考慮使用自定義文件。也就是說，對於那些正在尋找替代性輕量級方法的人來說，編寫自己的jQuery可能也很容易，比如向想要均衡的行添加一個類（我稱之爲「equalize '）然後添加：

var row=$('.equalize'); 
$.each(row, function() { 
    var maxh=0; 
    $.each($(this).find('div[class^="col-"]'), function() { 
     if($(this).height() > maxh) 
      maxh=$(this).height(); 
    }); 
    $.each($(this).find('div[class^="col-"]'), function() { 
     $(this).height(maxh); 
    }); 
}); 

將它包裝在一個函數中，如果這對您很重要，您也可以在調整大小時調用它。