Masonry grid with bootstrap 4

时间:2019-02-18 作者:ZWPDev

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

1 个回复
SO网友:tmdesigned

您正在混合引导框架和砖石结构。js库,但请求帮助解决WordPress StackExchange上产生的CSS问题。

你会在堆栈溢出方面有更好的运气:)这不是一个真正的WordPress问题。

我要说的是,我确实注意到您的代码有一些奇怪的地方,即无论您试图对$widths数组做什么,我都没有任何意义。当您调用array\\u shift时,它会给出数组的第一项,然后数组会被缩短。因此,第一次你叫它的时候,你会得到3个,然后是4个,然后是5个,然后再也没有了。根据你收到的帖子数量,你会叫它很多。