wordpress和bootstrap网格系统

I want to create on my wordpress page something like 3 posts in row, then start another row horizontaly, so i did it with bootstrap and it looks good for first 3 posts, but when next row starts, there is big empty space between rows, how it looks:

http://i.stack.imgur.com/XxQbI.png

My post loop code:

<?php get_header(); ?>



<div id="content">



<?php if (have_posts()) : ?>



    <?php while (have_posts()) : the_post(); ?>




            <article class="col-xs-6 col-md-4" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >



                <?php 

                if(!get_post_format()) {

                    //Display the Post Image by default

                    get_template_part( "post_image", "index" );

                } else {

                    get_template_part('format', get_post_format());

                }

                ?>



                <div class="post-inside container-fluid">

                    <div class="row">

                        <div class="post-content">

                            <?php the_title( sprintf( '<h2 class="post_title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>



                            <div class="entry">

                                <?php the_content(); //Read more button is in framework/functions/single_functions.php?>

                                <div class="clearfix"></div>

                            </div>

                            <div class="clearfix"></div>

                        </div><!-- /post_content -->





                    </div><!-- /row -->

                </div><!-- /post-inside -->



                <div class="clearfix"></div>

            </article>



<?php endwhile; ?>



<div class="clearfix"></div>



<?php get_template_part( "pagination", "index" ); ?>



<?php else : ?>



    <?php get_template_part( "/templates/content-none", "index" ); ?>



<?php endif; ?>

Pastebin: http://pastebin.com/Fw5rcfmh

Whats wrong with this code?

I Think you have to wrapper your columns into row , so after your structure will be <div class="row">3 columns</div> <div class="row">3 columns</div>

and repeating for every 3 columns, so now your code will be.

<?php get_header(); ?>



<div id="content">



<?php if (have_posts()) : ?>

 <?php $count = 1;?>

    <?php while (have_posts()) : the_post(); ?>



<div class="row">
            <article class="col-xs-6 col-md-4" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >



                <?php 

                if(!get_post_format()) {

                    //Display the Post Image by default

                    get_template_part( "post_image", "index" );

                } else {

                    get_template_part('format', get_post_format());

                }

                ?>



                <div class="post-inside container-fluid">

                    <div class="row">

                        <div class="post-content">

                            <?php the_title( sprintf( '<h2 class="post_title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>



                            <div class="entry">

                                <?php the_content(); //Read more button is in framework/functions/single_functions.php?>

                                <div class="clearfix"></div>

                            </div>

                            <div class="clearfix"></div>

                        </div><!-- /post_content -->





                    </div><!-- /row -->

                </div><!-- /post-inside -->



                <div class="clearfix"></div>

            </article>

   <?php if($count % 3 == 0){
     ?> </div>
        <div class="row">
     <?php
     }?>

<?php endwhile; ?>



<div class="clearfix"></div>



<?php get_template_part( "pagination", "index" ); ?>



<?php else : ?>



    <?php get_template_part( "/templates/content-none", "index" ); ?>



<?php endif; ?>

Hope this will help you.

You need to insert a .clearfix <div> that will realign the row.

Problem is that you're using responsive break at different screen sizes and this will break that. The solution is still .clearfix but inside hidden <div>'s that are made visible at the break point you desire.

The below code will fix for 3-col's in XS+SM and 4-col's in MD:

<div class="row">
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix hidden visible-xs-block visible-sm-block"></div>

  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix hidden visible-md-block visible-lg-block"></div>

  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix hidden visible-xs-block visible-sm-block"></div>

  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix hidden visible-md-block visible-lg-block"></div>

  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix hidden visible-xs-block visible-sm-block"></div>

  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>
  <div class="col-xs-4 col-sm-4 col-md-3">...</div>

  <div class="clearfix"></div>
</div>

(Hopefully you can see the pattern...)