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

Question

我正在开发一个 wordpress 主题，但我在帖子显示上遇到了一点问题，主题是在引导程序中开发的，所以我有一个用于帖子的类 col-md-6（2 列，共 3 列），并且 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

你使用的是什么版本的 Bootstrap？

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

或者，如果您使用的是 Bootstrap 3，则可以通过将每 2 列包装在 <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>

Answer 2

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

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