Foundation equalizer plug + BS 3.2?

Question

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.

Answer 1

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

DEMO

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

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>

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.

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.