1

尝试使用均衡器插头，但 id 不起作用，也没有错误。它看起来像http://goo.gl/OvKy1g。这是一个页面http://goo.gl/INMqUL。我需要包含一些CSS吗？

4

1 回答 1

2

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

演示

首先，您的主要问题是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元素，但您在子元素上使用了 class 边框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 版本。缩小版为 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);
    });
});

将它包装在一个函数中，如果这对您很重要，您也可以在调整大小时调用它。

于 2014-10-03T17:32:43.613 回答