Bootstrap 5响应式布局（卡片/网格/列）实现问题求助

直接用Bootstrap的嵌套网格就能解决这个问题，核心思路是通过外层分栏+右侧内部嵌套行的方式，实现大屏下右侧小卡片并排、小屏自动堆叠的响应式效果：

完整代码示例 #

<div class="container my-4">
  <div class="row g-4">
    <!-- 左侧大卡片 -->
    <div class="col-lg-8">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">大卡片标题</h5>
          <p class="card-text">这里是大卡片的内容区域，`h-100`能让它高度自动对齐右侧小卡片区域的总高度</p>
        </div>
      </div>
    </div>

    <!-- 右侧小卡片容器 -->
    <div class="col-lg-4">
      <div class="row g-4">
        <!-- 右侧小卡片1 -->
        <div class="col-lg-6 col-sm-12">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">小卡片1</h5>
              <p class="card-text">小卡片内容1</p>
            </div>
          </div>
        </div>

        <!-- 右侧小卡片2 -->
        <div class="col-lg-6 col-sm-12">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">小卡片2</h5>
              <p class="card-text">小卡片内容2</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键细节说明 #

• g-4：给行和列添加统一间距，符合Bootstrap的间距规范，无需自定义margin/padding
• h-100：让卡片高度填充满父容器，保证左侧大卡片和右侧小卡片区域高度对齐
• col-lg-6 col-sm-12：大屏（lg及以上）时两个小卡片各占右侧容器的一半实现并排，小屏（sm及以下）时自动切换为纵向堆叠
• 如果需要右侧小卡片在所有尺寸下都保持并排，只需把col-sm-12改为col-6即可

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