我是 php 和 wordpress 的新手,需要帮助。我正在尝试用 php 更改我的 Bootstrap 响应网格。 >992px 我应该有 3 列,>768px 我应该只有 2 列,<767px 我应该只有一列。我怎样才能用 php 做到这一点?非常感谢您的帮助。
这是我的代码:
<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>
最佳答案
<div class="col-lg-4 col-md-6 col-sm-12"></div>
网格系统基于有 12 列的想法。在文档中,它将描述与 xs、sm、md 和 lg 类相关的宽度。
上述解决方案应该可行,因为如果显示大于 992 像素,每行将放置三张卡片,如果大于 768 像素,则每行放置两张,如果小于 768 像素,则每行放置一张。
关于php - 如何使用 php 更改 Bootstrap 列响应式布局?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43149897/