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

我认为您必须将列包装成行，因此在您的结构将<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>

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

wordpress＆amp;自举网格系统

2 个答案: