本文详解如何在 bootstrap 中正确实现嵌套网格（如左侧 8 列模块区 + 右侧 4 列日程区），解决因缺失父级 `.row`、列宽总和超限或未重置行间距导致的卡片错位、高度不一致等问题。
在 Bootstrap 中构建嵌套网格系统时，核心原则是：每一组 .col-* 必须严格包裹在 .row 内，且同一 .row 下所有列的 col-* 数值之和应为 12（或其倍数，依赖响应式断点）。你原始代码中存在多个关键问题：
- ❌ 缺失闭合标签（如 未闭合，错位导致 DOM 结构混乱）；
- ❌ 在 .col-8 内部直接嵌套了未包裹在 .row 中的 .col-3 元素（Bootstrap 要求嵌套列必须位于新 .row 内）；
- ❌ 第二行卡片未添加垂直间距（如 mt-2），导致视觉上“挤在一起”，加剧高度不一致的错觉；
- ❌ 列宽设计不合理：col-3 × 4 = 12 是合法的，但你实际写了 3 个 col-3 后又嵌套了一个新 row（无父 .row），造成渲染异常。
✅ 正确做法如下：
- 外层容器：使用 .container → .row 构建主栅格；
- 左右分栏：.col-8（模块区） + .col-4（日程区）；
- 模块区内嵌网格：每个 .col-8 子区域需新增 .row，再分配 .col-4（3 列/行，占满 12）；若需多行，每行独立 .row，并用 mt-2 等间距工具类分隔；
- 日程区内嵌网格：同理，.row + 两个 .col-6 实现等宽双卡。
以下是结构清晰、语义完整、可直接运行的修复版代码：
<div class="container mt-4">
<div class="row">
<!-- 左侧模块区：占 8 列 -->
<div class="col-8">
<h3>Modules</h3>
<div class="module-container">
<!-- 第一行：3 张卡片 -->
<div class="row g-3">
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module A</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module B</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module C</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
</div>
<!-- 第二行：另 3 张卡片（带顶部间距） -->
<div class="row g-3 mt-3">
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module D</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module E</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module F</h5>
<p class="card-text text-muted small">Description</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧日程区：占 4 列 -->
<div class="col-4">
<h3>Schedule</h3>
<div class="row g-3">
<div class="col-12">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Event A</h5>
<p class="card-text text-muted small">Jun 12, 10:00 AM</p>
</div>
</div>
</div>
<div class="col-12">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Event B</h5>
<p class="card-text text-muted small">Jun 13, 2:30 PM</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>? 关键优化说明：
- 使用 g-3（gap）替代手动 mt-2，保证列间统一间距；
- 所有卡片添加 h-100 + d-flex flex-column，确保高度一致、内容垂直对齐；
- 图片统一设置 style="height: ...; object-fit: cover;" 防止拉伸变形；
- 每个 .row 内列宽总和严格为 12（如 col-4 × 3 或 col-12 × 2），避免 Bootstrap 自动换行或溢出；
- 移除冗余、未闭合的 HTML 标签，保障 DOM 清晰可靠。
? 小贴士：Bootstrap 5+ 不再默认为 .row 设置负边距（需配合 g-* 类控制间隙），因此务必使用 g-* 替代旧式 mx-n* + px-n* 组合，提升可维护性。
通过以上结构化嵌套，即可精准复现目标布局，并具备良好的响应式扩展能力（如在小屏下自动堆叠为单列）。
