使用Bootstrap实现WordPress文章两列排布 解决内容堆叠下沉问题

问题根因 #

你的代码将宽度为50%的col-lg-6列容器放在了文章循环的外层，所有查询到的文章都被塞进了同一个列容器内，自然只能纵向堆叠，无法实现横向并排的两列布局。

修正方案 #

把列容器放到while循环内部，每生成一篇文章就对应一个独立的50%宽度列，Bootstrap的row容器会自动将同排的列横向排布，满2列后自动换行到下一行。

修正后的代码如下：

<div class="container">
  <div class="row">
    <?php if (have_posts()) : ?>
      <?php while (have_posts()) : the_post(); ?>
        <!-- 每篇文章对应一个独立列 -->
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mb-4">
          <?php if ( has_post_thumbnail() ) : ?>
              <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                  <?php the_post_thumbnail(); ?>
              </a>
          <?php endif; ?>
          <h2 class="blog-post-title">
              <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
              </a>
            </h2>
        </div>
      <?php endwhile; ?>
    <?php endif; ?>
  </div>
</div>

可选优化 #

• 如果你使用的是Bootstrap 5及以上版本，col-xs-*规则已被移除，直接写col-12即可对应超小屏的全宽布局
• 代码中新增的mb-4是Bootstrap自带的下边距工具类，可根据需求调整数值，避免行间文章间距过窄
• 该写法天然支持奇数篇文章时最后一篇左对齐的效果，无需额外兼容处理

内容的提问来源于stack exchange，提问作者Dnbl_