基础均衡器插头+ BS 3.2? [英] Foundation equalizer plug + BS 3.2?

问题描述

尝试使用均衡器插件，但是id不起作用，并且没有错误.它看起来像 http://goo.gl/OvKy1g .这是页面 http://goo.gl/INMqUL .我需要为此添加一些CSS.

Trying to use equalizer plug, but id doesn't work, and no errors. It`s look like http://goo.gl/OvKy1g. Here is a page http://goo.gl/INMqUL. Do i need include some css for it.

推荐答案

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

You can use the Foundation Equalize plugin along with Twitter Bootstrap, but you need to do a couple of things to make it work.

首先，您的主要问题是foundation.js在寻找相应的foundation.css.由于您将Twitter Bootstrap用作基本样式，因此您可能不想处理所有潜在的样式冲突或让用户下载另一个大型css文件.真正需要的只是对Foundation版本和名称空间的引用，因此只需在CSS中添加以下内容即可:

First, your principle issue is that foundation.js is looking for the corresponding foundation.css. Since you're using Twitter Bootstrap as your base styles, you probably don't want to have to deal with all of the potential style conflicts or having your users download another large css file. Really all that is needed is a reference to the Foundation version and namespace, so just add the following to your 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的边界.因此，将您的标记更改为:

The second issue is with your markup. You have the data-equalizer-watch attribute applied to the containing .col-sm-4 element, but you have your border on the child element with the class latest-news-item. So change your markup to be:

<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>

正如您在演示中所看到的，我能够使您的测试页适应这些更改，但是我也能够通过使用 页面，仅使用均等插件构建js版本.缩小版本为31K.如果您不打算使用其他任何基础插件，则可以考虑使用自定义文件.

As you can see in the demo, I was able to get your test page to work with these changes, but I was also able to dramatically reduce the foundation.js file size by using the Custom option on the Foundation Download page and just building a js version with the equalize plugin only. The minified version was 31K. If you're not planning to use any of the other foundation plugins, you might consider using a custom file.

也就是说，对于正在寻找其他轻量级方法的人们来说，编写自己的jQuery就像在您想进行均衡的行中添加类一样容易(我称其为均衡" )，然后添加:

That said, for folks that are looking for an alternative lighter-weight approach, it might be just as easy to write your own jQuery such as by adding a class to the row you want to equalize (I called it 'equalize') and then add:

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);
    });
});

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

Wrap it in a function and you can call it on resize as well if that is important to you.

这篇关于基础均衡器插头+ BS 3.2?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！