组合Isotope和Bootstrap时浮动问题

Question

我的WordPress主题是使用Bootstrap，当我将它与Isotope结合使用时，如果所有元素大小相同，它都可以正常工作。但是作为Isotope的关键功能，在砌体中可能存在不同尺寸，我有一些特色帖子是6列，而不是3列。

这与Isotope非常吻合，除非第一个帖子有双倍大小。这打破了整个同位素砖石。但是，如果放置双倍大小的网格项目位于第二位置或更低位置，则会非常好看。

以前有人经历过这个，知道修复吗？

我在网上找到的代码示例中也看到了相同的行为：

所有相同大小：http://www.bootply.com/89551 一个不同大小（第一个位置）：http://www.bootply.com/WGTYFKjifZ 一个不同大小（第二个位置）：http://www.bootply.com/Rx9n79v0Q3

Answer 1

这是一个可行的选项。首先更新到Isotope v2.2，（你需要用这个版本单独加载imagesloaded.js），删除你的css中的同位素css过渡，然后使用与你的.col-md-3相同宽度的grid-sizer div（ 25％）。您也可以使用.col-md-3作为网格分级器。 这是Demo

$('#posts').imagesLoaded( function(){
$('#posts').isotope({
  itemSelector : '.item',
  masonry: {
// set to the element
columnWidth: '.grid-sizer'
}
});
});

css

.grid-sizer{width:25%}

将grid-sizer添加到#posts

 <div id="posts" class="row">
   <div class="grid-sizer"></div>
    <div id="1" class="item col-md-6">
        <div class="well">
        <h4><a href="#" target="_blank">Bootstrap</a></h4>

            <img class="thumbnail img-responsive" src="//lorempixel.com/150/180">
            <div class="info"> <span class="badge">90</span>
            <span class="badge">42</span>

            </div>
        </div>
     </div>