本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因遗漏父级 `.row` 或列宽计算错误导致的卡片错位、高度不一致等问题，并提供可直接运行的结构化代码示例。
在 Bootstrap 中构建类似「左侧 8 列模块区 + 右侧 4 列日程区」的响应式双栏布局时，关键在于*严格遵循“行（.row）→ 列（`.col-）→ 行（嵌套.row）→ 列”的层级结构**。初学者常犯的错误包括：在列内直接放置新列（缺少嵌套.row）、列宽总和超出 12、未统一卡片尺寸导致视觉参差，或混淆col-3与col-4` 的语义逻辑。
✅ 正确做法如下：
-
外层容器：使用 保证居中与响应式间距；
- 主行布局：
下划分为 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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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"> @@##@@ <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>? 注意事项总结：
- ❌ 错误示范：→ 缺少中间 .row，必然错位；…
- ✅ 正确嵌套：；…
- 使用 g-*（如 g-3）替代旧版 mx-n2 手动控制间隙，更简洁可靠；
- 图片建议添加 object-fit: cover 和固定高度，防止拉伸变形；
- 在小屏幕（如手机）下，col-8/col-4 会自动堆叠为 100% 宽度，如需保持并排，请使用响应式断点类（如 col-md-8 col-md-4）。
掌握嵌套网格的核心原则——「有列必有行，有行必归 12」，即可稳定构建任意复杂度的 Bootstrap 布局。
- 主行布局：
