WordPress动态备用帖子列

Question

我正尝试在替代列中显示帖子，如下图所示。我为两个小盒子创建了循环，就像在代码中一样，但是帖子怎么会出现在三个盒子中而不是仅出现在小盒子中。另一件事是如何根据类别更改每个帖子的徽章颜色

.post-title-1{
	position:absolute;
	bottom:20px;
	left:30px;
	color: #ffffff;
	font-weight:bold;
	font-size:1em;
	font-family:sans-serif;
	/*text-align: justify;*/
}

.post-title a{
	color: #ffffff;
	position:absolute;
	bottom:20px;
	left:10px;
	font-weight:bold;
	font-size:15px;
	font-family:sans-serif;
}
/**.post-title-2 a:hover{
	text-decoration: none;
}**/

.badge{
	position: absolute;
	left:30px;
	bottom:80px;
	padding:5px 15px;
	font-size:15px;
	font-weight:100;
	background-color:#c31419;;
}

.badge a{
	color:#fff;
}
hr{
	border:2px solid;
}

请注意未为帖子enter image description here指定的代码中的最后一个列

<?php get_header(); ?>
<div class="container">
    <div class="row">
    <div class="col-6 pr-0 ">
        <img class="img-fluid" src="<?php bloginfo('template_url')?>/img/530x400.png">
        <span class="badge badge-danger ">Local</span>
        <div class="annots post-title-1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
    <div class="col-2 p-0">
        <div class="row ml-0 mr-0">
            <?php if (have_posts()){
                while(have_posts()){
                    the_post();
            ?>
                    <div class="col-12 pl-0 pr-0 mb-1">
                        <img class="img-fluid" src="<?php bloginfo('template_url')?>/img/185x198.png">
                        <span class="badge"><?php the_category('Local', 'World')?></span>
                        <h3 class="annots post-title mb-0  d-none d-xl-block">
                            <a href="<?php the_permalink()?>"><?php the_title()?></a>
                        </h3>
                    </div>
                        <?php
                }
            }
            ?>
        </div>
    </div>
<!----- this col is not specified for posts---->
    <div class="col-4">
        <div class="">
            <div class=" ">
                <img class="img-fluid" src="<?php bloginfo('template_url')?>/img/340x400.png">
                <div class="annots"></div>
            </div>
        </div>
    </div>
</div>

</div>
<?php get_footer(); ?>