如何通过Bootstrap grid system水平排列卡片并实现单卡片跨两行布局

你需要的跨两行卡片布局可以通过Bootstrap原生工具类实现，无需额外自定义CSS，具体实现逻辑如下：

• 外层使用Bootstrap默认的12列网格系统，跨两行的大卡片占6列（对应你提到的“占据两个位置”），右侧小卡片组整体占6列
• 右侧小卡片组内部嵌套一层row，拆分出两行两列共4个小卡片，所有卡片统一加h-100类自动撑满父容器高度，保证高度对齐
• 所有卡片加w-100类避免自动换行错位，实现水平排列效果

示例代码 #

<div class="container mt-4">
  <!-- 外层总行 -->
  <div class="row g-3">
    <!-- 跨两行的大卡片 -->
    <div class="col-6">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">跨两行大卡片</h5>
          <p class="card-text">这里放卡片内容</p>
        </div>
      </div>
    </div>
    <!-- 右侧小卡片组 -->
    <div class="col-6">
      <div class="row g-3 h-100">
        <!-- 第一行小卡片 -->
        <div class="col-6">
          <div class="card h-100">
            <div class="card-body">小卡片1</div>
          </div>
        </div>
        <div class="col-6">
          <div class="card h-100">
            <div class="card-body">小卡片2</div>
          </div>
        </div>
        <!-- 第二行小卡片 -->
        <div class="col-6">
          <div class="card h-100">
            <div class="card-body">小卡片3</div>
          </div>
        </div>
        <div class="col-6">
          <div class="card h-100">
            <div class="card-body">小卡片4</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

注意事项 #

• 如果你使用的是Bootstrap 4版本，把代码里的间距类g-3替换为给每个列加mb-3类即可，其余逻辑完全一致
• 需要响应式适配的话，把固定列类col-6替换为对应断点的类即可，比如col-md-6 col-sm-12就可以实现移动端自动堆叠

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