您可以将 Foundation Equalize 插件与 Twitter Bootstrap 一起使用,但您需要做一些事情才能使其正常工作。
DEMO
首先,您的主要问题是foundation.js正在寻找相应的foundation.css。由于您使用 Twitter Bootstrap 作为基本样式,因此您可能不想处理所有潜在的样式冲突或让您的用户下载另一个大型 css 文件。实际上,所需要的只是对 Foundation 版本和命名空间的引用,因此只需将以下内容添加到您的 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>
正如您在演示中所看到的,我能够让您的测试页适应这些更改,但我还能够通过使用基础下载上的自定义选项页面并仅使用 equalize 插件构建一个 js 版本。缩小版是31K。如果您不打算使用任何其他基础插件,您可以考虑使用自定义文件。
也就是说,对于那些正在寻找替代的轻量级方法的人来说,编写自己的 jQuery 可能同样容易,例如通过向要均衡的行添加一个类(我称之为“均衡”),然后添加:
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);
});
});
将其包装在一个函数中,如果这对您很重要,您也可以在调整大小时调用它。