Question

我正在使用同位素插件和bootstrap，并遇到了一些麻烦。我需要同位素元素col-md-4周围的gallery-image-a div，因此.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 Snippet 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添加到类

min-width: 100px;

这是一个工作小提琴：https://jsfiddle.net/shirandror/rvnrk2kc/

Answer 2

您是否尝试将itemSelector选项定义为.col-md-4或更好地为＃34; grid-item＆＃34;更好地声明指定的类？

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

编辑：

我在codepen上提出了一个工作示例： http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

使用bootstrap进行同位素过滤

2 个答案: