本文详解如何使用 bootstrap 的栅格系统，将 5 个卡片按「左侧主卡（跨 2 列 × 2 行）+ 右侧 4 卡（2×2 网格）」方式精准布局，适配桌面端与移动端，并提供可直接运行的 html 结构与关键 css 优化建议。
本文详解如何使用 bootstrap 的栅格系统，将 5 个卡片按「左侧主卡（跨 2 列 × 2 行）+ 右侧 4 卡（2×2 网格）」方式精准布局，适配桌面端与移动端，并提供可直接运行的 html 结构与关键 css 优化建议。
在 Bootstrap 中实现类似 Photoshop 编辑图所示的「三列两行」混合布局（实际为 1+4 结构：首项占据左侧 2 列 × 2 行，其余 4 项以 2×2 网格填充右侧区域），关键在于嵌套 row 容器与合理分配 col 类，而非简单线性排列。原代码中所有 5 个 .col 并列于同一 .row，导致全部平铺一行；需重构为「左主右副」嵌套结构。
✅ 正确布局逻辑（基于 Bootstrap 5）
- 总容器设为 container，内部第一行 (row) 分为 2 列：
- 左列：col-lg-4（占 4/12 = 1/3 宽度，容纳主卡）
- 右列：col-lg-8（占 8/12 = 2/3 宽度，内嵌两个垂直堆叠的 row，每行含 2 个 col-lg-6 卡片）
- 主卡自身不需额外 row/col 包裹，直接置于左列内；右侧 4 卡通过两层嵌套 row 实现「两行两列」对齐。
? 重构后的核心 HTML 片段（含注释）
<section class="section" id="trainers">
<div class="container py-4">
<div class="row g-4"> <!-- 使用 Bootstrap 5 的 gap 工具类 -->
<!-- 左侧主卡：占 4 列宽度（lg 屏幕） -->
<div class="col-lg-4">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/brayWyatt.jpg" alt="Bray Wyatt" class="w-100 rounded">
</div>
<div class="down-content mt-3">
<span>RISE World Champion</span>
<h4>Bray Wyatt</h4>
</div>
</div>
</div>
<!-- 右侧副区：占 8 列宽度，内嵌两行 -->
<div class="col-lg-8">
<!-- 第一行：2 张卡片 -->
<div class="row g-4 mb-4">
<div class="col-lg-6">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/juliaHart.jpg" alt="Julia Hart" class="w-100 rounded">
</div>
<div class="down-content mt-3">
<span>RISE Women's Champion</span>
<h4>Julia Hart</h4>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/jayBriscoe.jpg" alt="Jay Briscoe" class="w-100 rounded">
</div>
<div class="down-content mt-3">
<span>RISE International Champion</span>
<h4>Jay Briscoe</h4>
</div>
</div>
</div>
</div>
<!-- 第二行：2 张卡片 -->
<div class="row g-4">
<div class="col-lg-6">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/streetProfits.jpg" alt="The Street Profits" class="w-100 rounded">
</div>
<div class="down-content mt-3">
<span>RISE Tag Team Champions</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="trainer-item-champion">
<div class="image-thumb-roster">
<img src="assets/images/wrestlers/streetProfits.jpg" alt="The Street Profits" class="w-100 rounded">
</div>
<div class="down-content mt-3">
<span>RISE Tag Team Champions</span>
<h4>The Street Profits</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>⚙️ 关键 CSS 优化建议
为确保视觉一致性与响应式健壮性，建议在原有样式基础上补充以下规则：
/* 统一图片尺寸与圆角 */
#trainers img {
max-width: 100%;
height: auto;
border-radius: 5px;
}
/* 针对主卡区域增强垂直居中（可选） */
.trainer-item-champion {
display: flex;
flex-direction: column;
height: 100%;
}
.image-thumb-roster {
flex: 1;
}
.down-content {
margin-top: auto; /* 推动文字到底部 */
}
/* 移动端适配：小屏下主卡独占一行，右侧卡片堆叠为单列 */
@media (max-width: 991.98px) {
.col-lg-4, .col-lg-8 {
flex: 0 0 100%;
max-width: 100%;
}
.row.g-4 > .col-lg-6 {
flex: 0 0 100%;
max-width: 100%;
}
}? 注意事项
- Bootstrap 版本确认：本文示例基于 Bootstrap 5（使用 g-* 间距类、col-lg-* 命名法）。若使用 Bootstrap 4，请将 g-4 替换为 mx-2 + my-2，并确保引入对应 CSS。
- 避免 ID 重复：原代码中多个 <section id="trainers"> 会导致 DOM 冲突，建议仅保留首个 ID，其余改用 class="trainers-section"。
- 图片加载性能：生产环境请添加 loading="lazy" 属性，并考虑 WebP 格式转换。
- 语义化增强：为提升可访问性，主卡区域可包裹 <article aria-labelledby="champ-title">，标题添加 id="champ-title"。
此方案既满足设计稿的视觉分区需求，又保持了 Bootstrap 栅格系统的语义清晰性与响应式弹性，无需依赖 Flexbox 或 CSS Grid 额外 hack，开箱即用。
