Php 引导网格中的Wordpress自定义查询

我想请求一些帮助，在Bootstrap4网格布局中添加5篇最新文章。 我只是觉得代码不对

谁能帮帮我吗

我已经发布了我要做的事情的图片和代码

最新消息
大沼泽将显示最新的帖子

第二
大沼泽将显示第二个最新的帖子

第三
大沼泽将显示第三个最新帖子

第四
大沼泽将显示第四个最新帖子

第五
大沼泽将显示第五个最新帖子

如果您使用的是引导4。。。您只需将网格4设置为
col-6
（我使用了md），因为它将自动运行到下一行，而不会破坏布局。如果您使用的是bootstrap3，则必须使用计数器来增加行数

<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col-md-6">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>




最新消息
大沼泽将显示最新的帖子

第二
大沼泽将显示第二个最新的帖子

第三
大沼泽将显示第三个最新帖子

第四
大沼泽将显示第四个最新帖子

第五
大沼泽将显示第五个最新帖子

看看这个和
offset
这应该会对你有所帮助。我能够用这个code-'数组得到正确的帖子（'posts_per_page'=>4，'offset'=>1'-但我仍然有一个问题，那就是如何让帖子在网格中正确显示。我不知道该怎么办！请显示你更新的代码。我已经更新了上面的代码-我只需要编辑一行代码就可以得到正确的帖子。剩下的唯一问题是-我需要显示y这4篇文章分成两行-2乘2非常感谢你-这很有效，但是当我从
-中删除-
小框时，我的css样式有一个小问题。我已经将css添加到我的代码中。正如你将看到的，有一个
空白：2px；
空格感谢帮助
<div class="row">
    <!-- Real Data -->
    <?php 
        $lastPagePosts = new WP_Query(
            array('posts_per_page' => 1
        ));
        while ($lastPagePosts->have_posts()) {
            $lastPagePosts->the_post(); ?>
        <div class="col-sm-12 col-lg-6 big-box">
            <h2><?php the_title(); ?></h2>
            <p><?php echo wp_trim_words( get_the_content() , 12 ) ?></p>
        </div>
    <?php } ?>
    <div class="col">
        <div class="row">
            <?php
                $topPagePosts = new WP_Query(
                    array('posts_per_page' => 4, 'offset' => 1
                ));
                while ($topPagePosts->have_posts()) {
                    $topPagePosts->the_post(); ?>
                <div class="col-md-6">
                    <h2><?php echo wp_trim_words( get_the_title() , 6) ?></h2>
                    <p><?php echo wp_trim_words( get_the_content() , 9 ) ?></p>
                </div>
            <?php } ?>
        </div>
    </div>

    <!-- Dummy Data -->

    <div class="col-sm-12 col-lg-6 big-box">
        <h2>Latest News</h2>
        <p>The big bog will display the most resent post.</p>
    </div>

    <div class="col">
        <div class="row">
            <div class="col mini-box">
                <h2>Second</h2>
                <p>The big bog will display the Second most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Third</h2>
                <p>The big bog will display the Third most resent post.</p>
            </div>
        </div>
        <div class="row">
            <div class="col mini-box">
                <h2>Fourth</h2>
                <p>The big bog will display the Fourth most resent post.</p>
            </div>
            <div class="col mini-box">
                <h2>Fifth</h2>
                <p>The big bog will display the Fifth most resent post.</p>
            </div>
        </div>
    </div>
</div>