css - 在列中显示帖子

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 文档部分

在你的情况下尝试：

<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>