wordpress 和引导网格系统

Question

我想在我的 wordpress 页面上创建类似 3 行的帖子，然后水平开始另一行，所以我使用 bootstrap 完成了它，前 3 个帖子看起来不错，但是当下一行开始时，有很大的空白空间在行之间，它的外观：

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

我的后循环代码：

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

这段代码有什么问题？

Answer 1

我认为你必须将你的列包装成 row ，所以在你的结构之后将是 <div class="row">3 columns</div> <div class="row">3 columns</div>

每 3 列重复一次，所以现在您的代码将是。

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

希望这会对你有所帮助。

Answer 2

您需要插入一个 .clearfix <div> 来重新对齐行。

问题是您在不同的屏幕尺寸下使用响应式中断，这会破坏它。解决方案仍然是 .clearfix，但在隐藏的 <div> 中，在您想要的断点处可见。

以下代码将修复 XS+SM 中的 3-col 和 MD 中的 4-col：

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

（希望你能看到模式……）