我有下面的代码,它应该使用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>