如何改变自举列reponsive与PHP的布局？

我很新的PHP和WordPress和需要帮助。我试图改变我的引导响应网格与PHP。 > 992px我应该有3列，> 768px我应该只有2列和< 767px我应该只有一个。我怎样才能做到这一点与PHP？真的很感谢帮助。如何改变自举列reponsive与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>

这是我对SM消除循环会发生什么：

来源

2017-03-31 nattienatz

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

的网格系统，是基于关闭的想法，有12列。在本文档中，将描述什么宽度涉及到XS，SM，MD，和LG类。

上述解决方案应该工作，因为这将会把三张牌每行显示是否大于992px，二如果超过768px大，一个话少。

这里是a little example

来源

2017-03-31 21:30:58

感谢您的回答，虽然这是行不通的。我用一张可以更好解释的图像编辑我的问题。 – nattienatz

嗯，这很奇怪。检查我编辑的示例以获取更多指导。该行也应嵌套在容器div中。如果它仍然无法工作，应该是WP干扰 –

如何改变自举列reponsive与PHP的布局？

回答

相关问题