石積み正しく浮きません -

Question

サイトはブートストラップで構築された、高さの変化にいくつかのdivの（または列）を有する

シナリオブートストラップ。そのためには、それらを浮かせる/整列させるために石積みを含める必要があります。

下のページには、3つの部分が異なるように構成されています。最初のものは石工で作られていません。そして、この部分は完璧に動作します。列の1つに多くのテキストがある場合を除いて、間違って浮動します。これは応答ビューに起こります。

第2と第3は、M​​asonryで構築されます。私はどこが間違っているのか分かりませんが、どれも応答性のあるビューで正しく機能していません。実際には両方とも非常に間違っていて、全く反応しません。

どこから始めるべきかわかりません。何か案は？

noconflictにはMasonryが含まれているため、JSと競合しません。

PHP

<div class="clearfix"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"><h1><!-- Info --></h1></div> 
     </div> 
     <div class="masonry-container"> 
      <div class="row"> 
       <div> 
        <div class="item col-xs-6 col-sm-6 col-md-3"> 
         <!-- Info --> 
        </div> 
        <div class="item col-xs-6 col-sm-6 col-md-3"> 
         <!-- Info --> 
        </div> 
        <div class="item col-xs-6 col-sm-6 col-md-3"> 
         <!-- Info --> 
        </div> 
        <div class="item col-xs-6 col-sm-6 col-md-3"> 
         <!-- Info --> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

石積みフッターに含ま：

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script> 

<script> 
jQuery.noConflict(); 
jQuery(document).ready(function($) { 
$('.masonry-container').imagesLoaded(function(){ 
    $('.masonry-container').masonry({ 
     itemSelector: '.item', 
     isAnimated: true, 
     isFitWidth: true 
    }); 
}); 

$(window).resize(function() { 
    $('.masonry-container').masonry({ 
     itemSelector: '.item', 
     isAnimated: true 
    }, 'reload'); 
}); 
}); 
</script> 

ページhereを見つけることができます。

Answer 1

jsファイルのいずれかに問題がありました。列をアニメーションでフェードイン/フェードアウトさせたjavascriptは、Masonryに干渉しました。

代わりに.visible-xs-blockと.visible-sm-blockを使用して問題が解決され、列が同じ行に表示されます。