在列中显示帖子

Question

我使用以下代码在两行三列中显示我的帖子： 我正在使用Bootstrap 3并且没有改变任何会影响列的css。

<?php   
            $query_recents = new WP_Query ( array( 'post_type' => 'portfolio', 'posts_per_page' => 6, 'paged' => $paged ) );

            if ( $query_recents->have_posts() ):
        ?>
        <div class="recent-posts row">  
            <?php while ( $query_recents->have_posts() ) : $query_recents->the_post(); ?>
                <div class="col-sm-4">
                    <?php get_template_part('templates/content', get_post_format()); ?>
                </div>
            <?php endwhile; ?>
        </div>  
        <?php endif; ?>  

这大部分都有效，除了在第二行，第一个帖子被推下来，如图所示。

有人可以提供有关如何纠正此问题的建议吗？ 提前谢谢。

Answer 1

您需要应用自适应列重置，请参阅：http://getbootstrap.com/css/#grid-responsive-resets和Bootstrap 3.0:responsive column resets section of the documentation

在你的情况下试试：

<div class="recent-posts row">  
            <?php 
            $i=0;
            while ( $query_recents->have_posts() ) : $query_recents->the_post(); ?>
                <div class="col-sm-4">
                    <?php get_template_part('templates/content', get_post_format()); ?>
                </div>
            <?php 

            if($i++%3==2) echo '<div class="clearfix visible-sm visible-md visible-lg"></div>';
            endwhile; ?>
</div>