合併同位素和自舉時的浮點問題

我的WordPress主題使用Bootstrap，當我將它與Isotope結合使用時，如果所有元素都具有相同的大小，它就可以正常工作。但作爲與同位素的關鍵功能，是在磚石的不同大小的可能性，我有一些特色的職位，是6列，而不是3.合併同位素和自舉時的浮點問題

這與非常好的同位素，除非第一篇文章有兩倍的大小。這打破了整個同位素砌體。但是，如果將雙重大小的格子物品放置在第二位或更低位置，則會非常好。

任何人都曾經歷過這種情況，並知道一個修復？

Screenshot of double sized grid item in 2nd position

Screenshot of double sized grid item in 1st position

我也看到了代碼示例我在網上找到相同的行爲：

所有同尺寸：http://www.bootply.com/89551 一個不同尺寸（1號位）：http://www.bootply.com/WGTYFKjifZ 一不同大小（第二位）：http://www.bootply.com/Rx9n79v0Q3

來源

2015-06-20 Ronny-André Bendiksen

這是一個可行的選項。首先更新到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%}

電網分級機添加到您的#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>

來源

2015-06-21 19:04:00 Macsupport

合併同位素和自舉時的浮點問題

回答

相關問題