Wordpress 结合同位素和引导时的浮点问题

Wordpress 结合同位素和引导时的浮点问题,wordpress,twitter-bootstrap,jquery-isotope,Wordpress,Twitter Bootstrap,Jquery Isotope,我的WordPress主题是使用Bootstrap,当我将它与同位素结合起来时,如果所有元素的大小都相同,它就可以正常工作。但是关于同位素的关键功能,是砖石中不同尺寸的可能性,我有一些特色的帖子是6列,而不是3列 这与同位素的作用非常好,除非第一根柱子的大小是原来的两倍。这打破了整个体系。但是,如果双倍大小的网格项目位于第二位或更低的位置,则效果非常好 以前有人经历过这种情况,并且知道修复方法吗 我在网上找到的一个代码示例中也看到了同样的行为: 所有尺寸相同: 一个不同尺寸(第一个位置):

我的WordPress主题是使用Bootstrap,当我将它与同位素结合起来时,如果所有元素的大小都相同,它就可以正常工作。但是关于同位素的关键功能,是砖石中不同尺寸的可能性,我有一些特色的帖子是6列,而不是3列

这与同位素的作用非常好,除非第一根柱子的大小是原来的两倍。这打破了整个体系。但是,如果双倍大小的网格项目位于第二位或更低的位置,则效果非常好

以前有人经历过这种情况,并且知道修复方法吗

我在网上找到的一个代码示例中也看到了同样的行为:

所有尺寸相同: 一个不同尺寸(第一个位置):
一个不同大小的(第二个位置):

这里有一个可行的选项。首先更新同位素v2.2(您需要在此版本中单独加载imagesloaded.js),删除css中的同位素css转换,然后使用与.col-md-3(25%)宽度相同的网格大小划分。您还可以使用.col-md-3作为网格大小调整器。 这是一个

css

将网格尺寸器添加到您的#帖子中


90
42
$('#posts').imagesLoaded( function(){
$('#posts').isotope({
  itemSelector : '.item',
  masonry: {
// set to the element
columnWidth: '.grid-sizer'
}
});
});
.grid-sizer{width:25%}
 <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>