我有下面的代码,它应该使用bootstrap 4显示砖石网格。我已经测试了代码,但网格无法在桌面和平板电脑上正确显示。相反,在mobile上,列没有问题。有没有办法解决此问题?我已经把砖石装好了。js脚本,我使用了在砌体官方文档中找到的片段。
<?php
$args = array(
  \'post_type\' => \'post\',
  \'category_name\' => \'portfolio\',
  \'post_per_page\' => \'6\'
);
$portfolio = new WP_Query($args);
$widths = array(\'3\',\'4\',\'5\');
?>
  <div class="row grid">
<?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post();  ?>
    <!-- add sizing element for columnWidth -->
    <div class="grid-sizer col-sm-12 col-lg-3"></div>
    <!-- items use Bootstrap .col- classes -->
    <div class="grid-item col-sm-12 col-<?php echo \'md-\' . array_shift($widths); ?> col-<?php echo \'lg-\' . array_shift($widths); ?>">
      <!-- wrap item content in its own element -->
      <div class="grid-item-content">
        <a href="<?php the_permalink(); ?>">
        <img class="card-img-top w-100" src="<?php the_post_thumbnail_url(\'small\'); ?>" id="case-studies">
        <div class="overlay-title">
          <h4 class="text-center" id="client-name"><?php the_title(); ?></h4>
        </div>
        </a>
      </div>
    </div>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
  </div>