同位体+ infiniteScroll +のWordpress +ブートストラップ

Question

は、私はワードプレスでカスタムポストタイプのアーカイブページを持っていると私は改ページにページあたり10件の記事を表示し、同位体JSを実行する。..

を比較的単純なことをしようとしています divパッキングのために私はnext_posts_link（）を使ってid '#next_archive_page'のリンクを生成します。すべての良いとこれはすべて期待どおりに動作します。

今、この（私はinfiniteScroll機能を実装れるのjQueryを追加しようとしているが、私はこれらの新しい投稿の画像をレンダリングするために得ることができる唯一の方法は、彼らからIMG-流体のブートストラップクラスを削除することです単に幅：100％;高さ：自動;）...私は私が私の応答性のレイアウトのためにそれを必要とするため、ING-流体クラスを削除したくない

<div class="row grid"> 
    <?php if($query->have_posts()) : while($query->have_posts()) : $query->the_post() ?> 
    <div class="grid-sizer col-4"> 
     <img class="img-fluid" src="..."> 
    </div> 
    <?php endwhile; endif; wp_reset_query() ?> 
</div> 

<script> 
    window.onload = function() { 

     var $grid = $('.grid').isotope({ 
      itemSelector : '.grid-item', 
      columnWidth : '.grid-sizer', 
      percentPosition : true 
     }); 

     $grid.infiniteScroll({ 
      hideNav: '.pagination', 
      path : '.pagination #next_archive_page', 
      scrollThresold: 200 
     }); 

     $grid.on('load.infiniteScroll', function(event, response, path) { 
      var $items = $(response).find('.grid-item'); 
      // It's the height: auto style that stops images displaying 
      $items.find('img').removeClass('img-fluid'); 
      $items.imagesLoaded(function() { 
       $grid.append($items); 
       $grid.isotope('insert', $items); 
      }); 
     }); 
    } 
</script> 

...だから

その結果、.grid-item elemenが追加されています。次のカスタムポストタイプのアーカイブページの正しい場所にありますが、それらはすべて重複していて、間違ったサイズです。

ブートストラップの応答性で、infiniteScrollとisotopeをうまく再生するにはどうすればよいですか？

Answer 1

要素のスタイリングを見ましたか？ 0の幅や0の高さで追加されたようです。