Question

我正在开发一个wordpress主题，我在帖子显示上有一点问题，主题是在bootstrap中开发的，所以我有一个类col-md-6（2列3）用于帖子，以及侧边栏的col-md-4，在某些页面中，帖子显示完全正确，但在其他页面中有一些白色间隙。我认为这是图像，摘录或标题的原因，但我试图关闭它，但也显示一些页面中的白色间隙。这是一个截图：

enter image description here

这是代码：

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

get_footer（）;

Answer 1

那是因为盒子是浮动的并且具有略微不同的高度，这（在你的图像中）导致第三个盒子在第二个盒子下面滑动，因为第一个盒子仍然有一小部分垂直空间

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

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

1 个答案: