我是php和wordpress的新手,需要帮助。我正在尝试使用php更改引导响应网格。 > 992px我应该有3列,> 768px我应该只有2列,
这是我的代码:

<div class="row">

    <?php $i = 1; while(have_posts()) : the_post();?>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="cover-card">
            <?php the_post_thumbnail('full', array('class' => 'image img-responsive')); ?>

            <div class="overlay">
                <div class="text">
                  <strong><?php the_title(); ?></strong>
                  <?php the_content(); ?>
                  <a href="<?php the_permalink(); ?>" class="btn btn-primary">Comprar</a>
                </div> <!-- /.text -->
            </div> <!-- /.overlay -->
        </div> <!-- /.cover-card -->
    </div> <!-- /.col-md-4 -->

<?php if ( $i % 3 === 0 ) { echo '</div> <!-- /.row -->

<div class="row">'; } ?>
<!-- store item -->
<?php $i++; endwhile; wp_reset_query(); ?>

</div>


这就是我对sm分辨率的循环发生的情况:
php - 如何使用php更改 bootstrap 列的响应式布局?-LMLPHP

最佳答案

<div class="col-lg-4 col-md-6 col-sm-12"></div>


网格系统基于12列的想法。在文档中,它将描述与xs,sm,md和lg类有关的宽度。

上面的解决方案应该起作用,因为如果显示大于992px,则每行放置三张卡片,如果大于768px,则放置两张,如果小于768px,则放置一张。

这是a little example

09-25 16:48