Bootstrap 4.2 Flexbox布局：双高Card右侧堆叠单高Card的实现问题

嘿，这个需求我之前做WordPress主题的时候刚好碰到过！其实不用死磕Flex布局的复杂调整，Bootstrap本身的网格系统加个小技巧就能完美解决，完全不需要固定高度，还能严格维持4:3的响应式比例。

核心思路 #

我们不用在Card容器上强行做Flex排列，而是利用Bootstrap的列嵌套+比例占位技巧：

1. 用row把布局分成左右两列，左侧列宽度对应双高Card的占比，右侧列放两个单高Card，它们会自动垂直堆叠。
2. 用padding百分比的技巧实现4:3的响应式比例（因为padding的百分比是基于父元素宽度计算的，刚好能自适应）。

具体实现代码 #

第一步：添加比例控制的CSS

把这段CSS加到你的主题样式文件（比如style.css）里：

/* 4:3响应式比例容器 */
.blog-card-ratio {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 3/4 = 75%，对应4:3比例 */
}

/* 让Card占满比例容器的空间 */
.blog-card-ratio > .card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
}

/* 让Card内容区域自动填充剩余空间，避免标题/摘要高度不一致导致Card变形 */
.blog-card-ratio .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.blog-card-ratio .card-text {
  flex: 1;
}

第二步：HTML结构（WordPress循环写法示例）

假设你在WordPress的archive.php或index.php里循环输出文章，结构可以这么写：

<div class="container py-4">
  <div class="row">
    <!-- 左侧双高Card：取第一篇文章 -->
    <?php $first_post = true; ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <?php if ($first_post) : ?>
        <div class="col-lg-8 mb-4">
          <div class="blog-card-ratio">
            <div class="card h-100 shadow-sm">
              <?php if (has_post_thumbnail()) : ?>
                <img src="<?php the_post_thumbnail_url('large'); ?>" class="card-img-top" alt="<?php the_title(); ?>">
              <?php endif; ?>
              <div class="card-body">
                <h5 class="card-title"><?php the_title(); ?></h5>
                <p class="card-text"><?php echo wp_trim_words(get_the_content(), 30); ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-primary mt-auto">阅读更多</a>
              </div>
            </div>
          </div>
        </div>
        <?php $first_post = false; ?>
        <!-- 右侧堆叠的两个单高Card -->
        <div class="col-lg-4">
      <?php else : ?>
          <div class="blog-card-ratio mb-4">
            <div class="card h-100 shadow-sm">
              <?php if (has_post_thumbnail()) : ?>
                <img src="<?php the_post_thumbnail_url('medium'); ?>" class="card-img-top" alt="<?php the_title(); ?>">
              <?php endif; ?>
              <div class="card-body">
                <h5 class="card-title"><?php the_title(); ?></h5>
                <p class="card-text"><?php echo wp_trim_words(get_the_content(), 20); ?></p>
                <a href="<?php the_permalink(); ?>" class="btn btn-primary mt-auto">阅读更多</a>
              </div>
            </div>
          </div>
      <?php endif; ?>
    <?php endwhile; endif; ?>
        </div>
  </div>
</div>

为什么这个方案可行？ #

• 无固定高度：所有高度都是通过padding-top:75%和Flex的h-100、flex:1自适应的，完全不会出现固定高度导致的适配问题。
• 严格4:3比例：padding百分比的特性保证了不管屏幕宽度怎么变，Card的宽高比始终是4:3。
• Bootstrap原生兼容：完全基于Bootstrap 4.2的网格系统，不需要额外引入插件，和WordPress主题的兼容性也很好。
• 响应式适配：用col-lg-8和col-lg-4的断点，在平板及以下屏幕会自动切换成单列布局，移动端体验也没问题。

额外小技巧 #

如果想让右侧两个Card的总高度和左侧双高Card完全对齐，只要保证右侧每个Card的内容高度加上图片高度的总和是左侧Card的一半就行（因为我们用了比例容器，只要内容不溢出，高度会自动匹配）。如果内容高度差异大，card-text的flex:1会让文本区域自动填充，避免Card高度不一致。

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