本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因遗漏父级 `.row` 或列宽计算错误导致的卡片错位、高度不一致等问题，并提供可直接运行的结构化代码示例。
在 Bootstrap 中构建类似「左侧 8 列模块区 + 右侧 4 列日程区」的响应式双栏布局时，关键在于*严格遵循“行（.row）→ 列（`.col-）→ 行（嵌套.row）→ 列”的层级结构**。初学者常犯的错误包括：在列内直接放置新列（缺少嵌套.row）、列宽总和超出 12、未统一卡片尺寸导致视觉参差，或混淆col-3与col-4` 的语义逻辑。
✅ 正确做法如下：
- 外层容器：使用 <div class="container"> 保证居中与响应式间距；
- 主行布局：<div class="row"> 下划分为 col-8（模块区）与 col-4（日程区）；
- 嵌套行必须显式声明：每个 .col-* 内若需多列排列，必须包裹一层新的 .row —— Bootstrap 的栅格系统依赖 .row 重置负边距（margin: 0 -15px）并触发 flex 布局，否则子列会继承外层列的 padding，造成错位或宽度溢出；
- 列宽需整除 12：例如在 col-8 区域内展示 3 卡/行，应使用 col-4（3 × 4 = 12），而非 col-3（3 × 3 = 9，剩余 3 列空白，破坏对齐）；同理，col-4 区域内两列并排应使用 col-6（2 × 6 = 12）；
- 保持卡片一致性：为避免高度不一影响网格流，建议为 .card 设置最小高度（如 min-height: 200px）或启用 Bootstrap 5+ 的 h-100 类，配合 d-flex flex-column 确保内容区域拉伸。
以下是修复后的完整、可运行代码（基于 Bootstrap 5.3）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Bootstrap 嵌套网格示例</title>
</head>
<body>
<div class="container mt-4">
<div class="row">
<!-- 左侧模块区：占 8 列 -->
<div class="col-8">
<h3 class="mb-3">Modules</h3>
<div class="module-container">
<div class="row g-3"> <!-- 使用 g-3 实现列间间隙 -->
<!-- 每行 3 张卡片：col-4 × 3 = 12 -->
<div class="col-4">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 1" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module A</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 2" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module B</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 3" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module C</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
<!-- 第二行卡片（同样 col-4 × 3） -->
<div class="col-4 mt-3">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 4" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module D</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 5" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module E</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
<div class="col-4 mt-3">
<div class="card h-100 d-flex flex-column">
<img src="/images/pat.jpg" class="card-img-top" alt="Module 6" style="height: 120px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Module F</h5>
<p class="card-text text-muted flex-grow-1">Description here.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧日程区：占 4 列 -->
<div class="col-4">
<h3 class="mb-3">Schedule</h3>
<div class="row g-3">
<div class="col-6">
<div class="card h-100">
<img src="/images/star.jpg" class="card-img-top" alt="Event 1" style="height: 100px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Event A</h5>
<p class="small text-muted mb-0">9:00–10:30</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100">
<img src="/images/star.jpg" class="card-img-top" alt="Event 2" style="height: 100px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h5 class="card-title mb-2">Event B</h5>
<p class="small text-muted mb-0">11:00–12:30</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>? 注意事项总结：
- ❌ 错误示范：<div class="col-4"><div class="col-6">…</div></div> → 缺少中间 .row，必然错位；
- ✅ 正确嵌套：<div class="col-4"><div class="row"><div class="col-6">…</div></div></div>；
- 使用 g-*（如 g-3）替代旧版 mx-n2 手动控制间隙，更简洁可靠；
- 图片建议添加 object-fit: cover 和固定高度，防止拉伸变形；
- 在小屏幕（如手机）下，col-8/col-4 会自动堆叠为 100% 宽度，如需保持并排，请使用响应式断点类（如 col-md-8 col-md-4）。
掌握嵌套网格的核心原则——「有列必有行，有行必归 12」，即可稳定构建任意复杂度的 Bootstrap 布局。
