使用bootstrap网格显示两列中的wordpress循环

Question

您好我需要修改我的WP主题，使其在两列中显示一个帖子。 像这样：

但是当我添加第二篇文章时，它会像这样：

这是博客部分自定义php文件的当前代码，我可以做一个wipeout并忘记这段代码并从头开始，我已经尝试但我无法使其工作......真的很感激任何提示/建议..我不是专科医生，我正在学习

<div class="container content">
        <div class="row blog-page">
            <div class="col-md-9 md-margin-bottom-40">
                <!--Blog Post-->    
                    <div class="row blog blog-medium margin-bottom-40">
                            <?php // Display blog posts on any page @ http://m0n.co/l
                                        $category_id = get_cat_ID('Blog');
                                        $catquery = new WP_Query( 'cat=' .$category_id. '&posts_per_page=5' . '&paged='.$paged );
                                        while ($catquery->have_posts()) : $catquery->the_post(); ?>
                            <div class="col-md-5">
                            <?php 
                                    the_post_thumbnail('medium') ;
                                ?>
                            </div>
                            <div class="col-md-7">

                                <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
                                <?php the_excerpt(); 
                                ?>

                                <?php endwhile; ?>
                                <?php if ($paged > 1) { ?>

                                    <nav id="nav-posts">
                                        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
                                        <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
                                    </nav>

                                    <?php } else { ?>

                                    <nav id="nav-posts">
                                        <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
                                    </nav>

                                    <?php } ?>

                                    <?php wp_reset_postdata(); ?>               

                            </div>

                   </div>
                   <hr class="margin-bottom-40">
                <!--End Blog Post-->


                <!--End Blog Post-->

            </div>

            <!-- Right Sidebar -->
            <?php get_sidebar() ; ?>
            <!-- End Right Sidebar -->
        </div><!--/row-->
    </div><!--/container-->

提前感谢您的帮助

Answer 1

请将此代码替换为您的代码并显示输出，如图像。

<div class="container content">
<div class="row blog-page">
    <div class="col-md-12 md-margin-bottom-40">
        <!--Blog Post-->    
        <div class="row blog blog-medium margin-bottom-40">
            <?php
            // Display blog posts on any page @ http://m0n.co/l
            $category_id = get_cat_ID('Blog');
            $catquery = new WP_Query('cat=' . $category_id . '&posts_per_page=5' . '&paged=' . $paged);
            while ($catquery->have_posts()) : $catquery->the_post();
                ?>
                <div class="col-md-2">
                    <?php
                    the_post_thumbnail('medium');
                    ?>
                </div>
                <div class="col-md-4">

                    <h2><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h2>
                    <?php the_excerpt();
                    ?>
                </div>
            <?php endwhile; ?>
            <?php if ($paged > 1) { ?>

                <nav id="nav-posts">
                    <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
                    <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
                </nav>

            <?php } else { ?>

                <nav id="nav-posts">
                    <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
                </nav>

            <?php } ?>

            <?php wp_reset_postdata(); ?>               

        </div>

    </div>
    <hr class="margin-bottom-40">
    <!--End Blog Post-->


    <!--End Blog Post-->

</div>

<!-- Right Sidebar -->
<?php get_sidebar(); ?>
<!-- End Right Sidebar -->

请检查并告知我们。