Изотопная фильтрация с бутстрапом

Question

Я работаю над использованием изотопного плагина с бутстрапом и столкнулся с некоторыми проблемами. Мне нужен div col-md-4 вокруг изотопного элемента gallery-image-a, поэтому .grid не является прямым родителем изотопного элемента. Как только я избавлюсь от col-md-4 div, который мне нужен, плагин работает.

Интересно, знает ли кто-нибудь, как сохранить существующую разметку при сохранении функциональности плагина isotope?

HTML Отрывок 1

<span class="menu-button" id="food-button">Food</span> 
    <span class="menu-button" id="staff-button">Staff</span> 
    <span class="menu-button" id="all-button">All</span> 

HTML Отрывок 2

<div class="container"> 
     <div class="row grid"> 
      <div class="col-md-4"> 
       <a class="gallery-image-a food"></a> 
      </div> 
      <div class="col-md-4"> 
       <a class="gallery-image-a staff"></a> 
      </div> 
      <div class="col-md-4"> 
       <a class="gallery-image-a food"></a> 
      </div> 
      <div class="col-md-4"> 
       <a class="gallery-image-a staff"></a> 
      </div> 
      <div class="col-md-4"> 
       <a class="gallery-image-a food"></a> 
      </div> 
      <div class="col-md-4"> 
       <a class="gallery-image-a staff"></a> 
      </div> 
     </div> 
    </div> 

CSS

.gallery-image-a { 
    display:block; 
    height:360px; 
    background-position:center center; 
    transition: ease all 950ms; 
    background-repeat:no-repeat; 
    box-sizing: border-box; 
    border:10px solid #fff; 
    background-size:cover; 
    background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg'); 
} 

JavaScript

$grid = $('.grid'); 
$grid.isotope(); 

$('#food-button,#staff-button, #all-button').click(function(){ 
    var id = $(this).attr('id'); 
    var className = id.replace("-button", ""); 

    if (className == 'all') { 
     $grid.isotope({ filter: '*' }); 
     return false; 
    } 
    $grid.isotope({ filter: '.' + className }); 
}); 

Answer 1

2 проблемы. Во-первых, фильтр работает на детей, чтобы изменить HTML для этого

<div class="container"> 
     <div class="row grid"> 
      <div class="col-md-4 food"> 
       <a class="gallery-image-a"></a> 
      </div> 
      <div class="col-md-4 staff"> 
       <a class="gallery-image-a"></a> 
      </div> 
      <div class="col-md-4 food"> 
       <a class="gallery-image-a"></a> 
      </div> 
      <div class="col-md-4 staff"> 
       <a class="gallery-image-a"></a> 
      </div> 
      <div class="col-md-4 food"> 
       <a class="gallery-image-a"></a> 
      </div> 
      <div class="col-md-4 staff"> 
       <a class="gallery-image-a"></a> 
      </div> 
     </div> 
    </div> 

секунду, даже если она работает, вы не увидите. добавить мин ширины в класс

min-width: 100px; 

вот рабочая скрипку: https://jsfiddle.net/shirandror/rvnrk2kc/

Answer 2

Вы пытались определить параметр itemSelector для .col-md-4 или лучше объявить назначенный класс для этого типа «grid-item»?

$('.grid').isotope({ 
    itemSelector: '.grid-item' 
}); 

EDIT:

Я терплю рабочий пример на codepen: http://codepen.io/iCymiCy/pen/grwpXp?editors=1111