Twitter bootstrap 3 同位素和Bootstrap3：内容div在排序时消失

这一定很简单，但我很困惑

内容

divs

在排序时消失

我缺少正确的

数据过滤器

？或

显示：无

或

显示：块

Codepen：（您可以克隆它以进行更改。）

HTML:

<ul id="filters">
  <li><a href="#" data-filter="*">Everything</a></li>
<li><a href="#" data-filter="blog">Blog</a></li>
<li><a href="#" data-filter="ciso">CISO</a></li>
<li><a href="#" data-filter="labs">LABS</a></li>
</ul>

<div class="container-fluid">
  <div id="isotope-blog">
  <div class="grid">
    <div class="grid-sizer col-xs-12 col-md-6"></div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div><div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
    </div>
  </div>
  </div>
</div>

.grid-item-content {
  max-height: 120px;
  background: #0D8;
  border: 2px solid #000;
  overflow:hidden;
}

.container-fluid {
 max-width:1200px;
}

jQuery(function ($) {

    var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

jQuery:

<ul id="filters">
  <li><a href="#" data-filter="*">Everything</a></li>
<li><a href="#" data-filter="blog">Blog</a></li>
<li><a href="#" data-filter="ciso">CISO</a></li>
<li><a href="#" data-filter="labs">LABS</a></li>
</ul>

<div class="container-fluid">
  <div id="isotope-blog">
  <div class="grid">
    <div class="grid-sizer col-xs-12 col-md-6"></div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content blog">Blog Blog Blog</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content labs">LABS LABS LABS</div>
    </div>
    <div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content ciso">CISO CISO CISO</div>
    </div><div class="grid-item item col-xs-12 col-md-6">
      <div class="grid-item-content security-blog">BLOG BLOG BLOG</div>
    </div>
  </div>
  </div>
</div>

.grid-item-content {
  max-height: 120px;
  background: #0D8;
  border: 2px solid #000;
  overflow:hidden;
}

.container-fluid {
 max-width:1200px;
}

jQuery(function ($) {

    var $container = $('#isotope-blog'); //The ID for the list with all the blog posts
    $container.isotope({ //Isotope options, 'item' matches the class in the PHP
        itemSelector : '.item', 
        layoutMode : 'masonry'
    });

    //Add the class selected to the item that is clicked, and remove from the others
    var $optionSets = $('#filters'),
    $optionLinks = $optionSets.find('a');

    $optionLinks.click(function(){
    var $this = $(this);
    // don't proceed if already selected
    if ( $this.hasClass('selected') ) {
      return false;
    }
    var $optionSet = $this.parents('#filters');
    $optionSets.find('.selected').removeClass('selected');
    $this.addClass('selected');

    //When an item is clicked, sort the items.
     var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });

    return false;
    });

});

现在可以这样做了：

这是一个两列的布局，可通过

网格项

div元素中的过滤器类进行排序。过滤器类可以是多个不同的类

问题是：

我的HTML标记太复杂和错误；它需要采用以下格式：

<div class="container">

  <div class="isotope-list">

    <div class="row">

      <div class="grid-item blog">OneOneOneOne Blog Blog Blog</div>

      <div class="grid-item blog">TwoTwoToTwoTwoTwo Blog Blog Blog </div>

and on and on...

 </div>
  </div>