Bootstrap布局调整：冠军卡片跨行列重构需求

直接用Bootstrap的栅格系统结合CSS Grid的跨行属性就能实现你要的布局，不用额外写复杂样式，具体代码和说明如下：

完整HTML代码 #

<div class="container my-4">
  <!-- 父容器用Grid布局，定义2行高度自适应 -->
  <div class="row g-4" style="display: grid; grid-template-rows: auto auto;">
    <!-- 第一个卡片：占6列（对应4列布局的2列宽度），跨2行 -->
    <div class="col-6 grid-row-2 trainer-item-champion">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">冠军卡片1</h5>
          <p class="card-text">这里是跨2行的卡片内容，高度会自动匹配右侧两行卡片的总高度</p>
        </div>
      </div>
    </div>

    <!-- 右侧4个卡片：每行2个，各占3列（对应4列布局的1列宽度） -->
    <div class="col-3 trainer-item-champion">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">卡片2</h5>
          <p class="card-text">常规卡片内容</p>
        </div>
      </div>
    </div>
    <div class="col-3 trainer-item-champion">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">卡片3</h5>
          <p class="card-text">常规卡片内容</p>
        </div>
      </div>
    </div>
    <div class="col-3 trainer-item-champion">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">卡片4</h5>
          <p class="card-text">常规卡片内容</p>
        </div>
      </div>
    </div>
    <div class="col-3 trainer-item-champion">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">卡片5</h5>
          <p class="card-text">常规卡片内容</p>
        </div>
      </div>
    </div>
  </div>
</div>

关键要点说明 #

• 父容器设置：给row添加display: grid和grid-template-rows: auto auto，明确布局为2行，高度随内容自适应。
• 第一个卡片：col-6对应Bootstrap12列网格的一半宽度，正好是你要的4列布局中占2列；grid-row-2让这个卡片直接跨越2行，高度自动匹配右侧两行卡片的总高度。
• 剩余卡片：col-3对应4列布局的1列宽度，每行放2个刚好填满右侧的6列空间；h-100确保每个卡片都充满父容器高度，避免内容长短导致的布局错位。
• 间距控制：g-4是Bootstrap的间距类，用来设置卡片之间的间隙，可根据需求调整为g-3/g-5等。

如果需要适配响应式（比如小屏幕下自动堆叠），只需把col-6改成col-md-6，col-3改成col-md-3，Bootstrap会自动在小屏幕下调整为每行1个卡片。

内容的提问来源于stack exchange，提问作者Kaiet Ortiz De Zarate