Фундамент эквалайзера Foundation + BS 3.2?

Question

Пытается использовать штепсель эквалайзера, но идентификатор не работает и ошибок нет. Это выглядит как http://goo.gl/OvKy1g. Вот страница http://goo.gl/INMqUL. Мне нужно включить некоторые CSS для этого.

Answer 1

Вы можете использовать плагин 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> 

Как вы можете видеть в демо, я был в состоянии получить тестовую страницу, чтобы работать с этими изменениями, но я также был в состоянии значительно уменьшить размер файла foundation.js используя страницу Custom option on the Foundation Download и просто создавая 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); 
    }); 
}); 

Заверните его в функцию, и вы можете вызвать его на изменение размеров, а также, если это важно для вас.