具有Skeleton CSS框架的网格

Question

我在使用Wordpress循环时出现一个问题，以显示带有Skeleton网格的帖子，这应该是这样的：

<div class="container">
    <!-- Every row has 4 posts-->
    <div class="row">
       <div class="three columns">Post1</div>
       <div class="three columns">Post2</div>
       <div class="three columns">Post3</div>
       <div class="three columns">Post4</div>
    </div>
    <div class="row">
       <div class="three columns">Post5</div>
       <div class="three columns">Post6</div>
       <div class="three columns">Post7</div>
       <div class="three columns">Post8</div>
    </div>
    <!--And then it continues--> 
</div>

发生了什么： Image of The problem with grid 它应该每行显示4个帖子，它开始显示4，但在第一行之后，它每行显示3个帖子。

<div class="container">

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
    <div id="nav-above" class="navigation">
        <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
        <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
    </div><!-- #nav-above -->
<?php endif; ?>

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
    <div id="post-0" class="post error404 not-found">
        <h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
        <div class="entry-content">
            <p><?php _e( 'Apologies, but no results were found for the requested Archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
    </div><!-- #post-0 -->
<?php endif; ?>

<?php /* Start the Loop */ ?>

<?php $num_cols = 3; // set the number of columns here 

for ( $i=1 ; $i <= $num_cols; $i++ ) :
echo '<div class="row">';
$counter = $num_cols + 1 - $i; ?>

<?php while (have_posts()) : the_post();
if( $counter % $num_cols == 0 ) :
// begin of core posts output ?>

        <article class="three columns articlebox">

        </article><!-- #post-<?php the_ID(); ?> -->

<?php //end of posts output

endif; $counter++;
endwhile;
rewind_posts();
echo '</div>'; //closes the column div
endfor; ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
                <div id="nav-below" class="navigation">
                <?php if(function_exists('page_navi')) { page_navi(); } else { ?>
                    <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
                    <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
                    <?php } ?>
                </div><!-- #nav-below -->
<?php endif;
 wp_reset_query(); ?>

</div>