Разметка сетки изотопа не работает при изменении размера окна

Question

У меня проблемы с изотопом на моем сайте. Я думал, что я все это рассмотрел, но теперь есть проблема при изменении размера окна. При изменении размера окна вся сетка перемещается вниз по странице. Это не устраняется повторным выполнением макета при изменении размера окна. Запуск .isotope ('layout') всегда перемещает всю сетку в нижнюю часть страницы. Мой код также реализует бесконечный свиток, поэтому я участвую в детях хидденлема. Я также использую bootstrap btw.

(важные) часть кода:

if (typeof g_Isotopegrid === 'undefined') { 
        g_Isotopegrid = $('.grid').isotope({ 
          itemSelector: '.grid-item', 
          stamp: '.stamp', 
          masonry: { 
           columnWidth: 255, 
           gutter: 30 
          } 
         });      
       } 

       // Append all the hidden items to the visible items element 
       hiddenElm.children().each(function() { 
       var aItem = $(this); 
       // Append the items to the visible div 
       aItem.appendTo(visibleElm).imagesLoaded(function() { 
        g_Isotopegrid.isotope('appended', aItem); 
       }); 

       }); 

Любая помощь приветствуется!

Answer 1

Проблема заключалась в том, что мы не использовали прямой контейнер элементов сетки в качестве элемента для применения изотопа.

Answer 2

В Bootstrap я никогда не ставил статический ширин: класс

masonry: { 
    columnWidth: 255, 
    gutter: 30 
} 

всего в элементе:

masonry: { 
    columnWidth: '.grid-item', 
    gutter: 30 
} 

При использовании Bootstrap лучше для классов ширины использовать пункт Bootstrap в.