我的WordPress自定义主题页面上的帖子以不同顺序显示

Question

我正在开发一个wordpress主题，并且帖子显示上有一个小问题，该主题是在bootstrap中开发的，所以我为帖子设置了col-md-6类（3列，共2列），而col-md-4对于边栏，在某些页面中帖子显示得非常正确，但是在其他页面中则存在一些空白。 我以为是图像，摘录或标题的原因，但我尝试将它们取下来，但在某些页面上仍显示空白。 这是屏幕截图：

这是代码：

    <div class="c-content-box c-size-md" >
            <div class="container hidden-phone">
                <div class="row">
                    <div class="c-content-blog-post-card-1-grid col-sm-12 col-md-12 col-xs-12">
                        <div class="row">

                                <div class="col-md-8"> 

                                    <?php

                                         if (have_posts()) : while (have_posts()) : the_post(); ?>

                                        <div class="col-md-6">
                                            <div class="c-content-blog-post-card-1 c-option-2 c-bordered wow animate fadeInLeft" data-wow-delay="0.5s">
                                                <div class="c-media img">
                                                    <div class="c-overlay-wrapper">
                                                        <div class="c-overlay-content">
                                                            <?php the_post_thumbnail( '', array( 'style' => 'width:100%;height:auto' ) ); ?>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="c-body">
                                                    <div class="c-title c-font-bold c-font-uppercase" >
                                                        <a href="<?php echo the_permalink(); ?>"><?php the_title(); ?></a>
                                                    </div>
                                                    <div class="c-author">
                                                        <span class="c-font-uppercase"><?php the_time( 'M j Y' ); ?></span>
                                                    </div>

                                                    <div class="c-comments" style="text-align:center;">
                                                            <i class="icon-speech"></i> <?php comments_popup_link( '0 Comentarios', '1 Comentario', '% Comentarios' ); ?>   
                                                    </div>
                                                    <div>
                                                        <?php the_excerpt();  ?>
                                                    </div>
                                                </div>                  
                                            </div>
                                        </div>
                                    <?php endwhile;

                                    ?>

                                    <?php
                                    // Previous/next page navigation.
                                    the_posts_pagination( array(
                                        'prev_text'          => __( 'Previous page', 'goc' ),
                                        'next_text'          => __( 'Next page', 'goc' ),
                                        'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'goc' ) . ' </span>',
                                    ) );
                                    ?>  

                                </div>

                                <div class="col-md-4 ">
                                    <div class="col-md-12 wow animate fadeInRight" data-wow-delay="1s">
                                        <?php get_sidebar(); ?>
                                    </div>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        </main><!-- #main -->
    </div><!-- #primary -->

    <?php else : ?>
<?php endif; ?>

<?php

get_footer();

Answer 1

那是因为这些盒子是漂浮的并且具有略微不同的高度，这（在您的图像中）导致第三个盒子滑到第二个盒子下面，因为第一个盒子还有一点垂直空间。

您可以通过对所有框使用固定高度或使用display: flex;来避免这种情况display: flex; 和flex-wrap; 在容器元素上。

Answer 2

您正在使用什么版本的Bootstrap？

您可以通过添加一些弹性功能（包括在第4版的Bootstrap中）来避免这些不必要的包装行为： https : //v4-alpha.getbootstrap.com/utilities/flexbox/

另外，如果您使用的是Bootstrap 3，则可以通过将每两列包装在<div class="row"></div>容器中来解决问题。

将会是这样的：

<div class="row">
<?php
$colCount = 0;
while ( have_posts() ): the_post();
$colCount++;
        if ( have_posts() ): 
            if ($colCount % 2 == 0): ?>
                </div>
                <div class="row">
            <?php endif; ?>
            <!--The content of your column-->
        <?php endif;
endwhile;
?>
</div>