本文详解如何在 bootstrap 中正确实现嵌套网格（nested grid），解决因未遵循“row → col → row → col”层级规范导致的卡片错位、宽度不均等问题，并提供可运行的结构化代码示例。
在 Bootstrap 中构建嵌套网格系统时，一个常见误区是忽略其严格的容器嵌套规则：所有列（.col-*）必须直接置于 .row 内，而 .row 又必须置于 .container 或另一个 .col-* 中。若在列内部直接放置新列（如 <div class="col-3">）而未包裹在 .row 中，Bootstrap 的 flex 布局将失效，导致列宽计算错误、换行异常、高度不一致等问题——这正是提问者第二行卡片长度不统一的根本原因。
✅ 正确嵌套结构原则
- 外层容器：.container → .row（主行）
- 主行内分栏：.col-8（左侧模块区） + .col-4（右侧日程区）
- 每个 .col-* 内部如需多列布局，必须先添加 .row，再在其下放置子 .col-*
- 列宽总和应为 12（如 col-4 + col-4 + col-4 = 12；col-6 + col-6 = 12），确保单行内自动水平排列
? 完整可运行示例（Bootstrap 5+）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 嵌套网格示例</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-4">
<div class="row">
<!-- 左侧模块区：占 8/12 宽度 -->
<div class="col-8">
<h3 class="mb-3">Modules</h3>
<div class="module-container">
<!-- 嵌套 row：每行 3 张卡片（3 × col-4） -->
<div class="row g-3">
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块一</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块二</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块三</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
<!-- 第二行卡片（同样使用 col-4 + g-3 保持对齐） -->
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块四</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块五</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
<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">
<h6 class="card-title mb-2">模块六</h6>
<p class="card-text text-muted small mb-0">描述文字</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧日程区：占 4/12 宽度 -->
<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="Schedule 1" style="height: 100px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">日程一</h6>
<p class="card-text text-muted small 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="Schedule 2" style="height: 100px; object-fit: cover;">
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">日程二</h6>
<p class="card-text text-muted small 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 直接嵌套 `.col-`**：这是最常导致布局崩溃的原因；
- 使用 g-3（gap）替代手动 mt-2：语义更清晰，响应式更可靠；
- 统一卡片高度：添加 h-100 类 + d-flex flex-column，使卡片内容区域自适应并底部对齐；
- 图片适配：通过 style="height: ...; object-fit: cover;" 防止拉伸变形；
- 移动端友好：Bootstrap 默认响应式断点（如 col-8 在所有屏幕生效），如需响应式调整，改用 col-md-8、col-lg-6 等。
✅ 总结
Bootstrap 的嵌套网格不是“任意嵌套”，而是有明确的 DOM 层级契约：.row 是列的唯一合法父容器。只要严格遵守「外层 row → 子列 → 子列内新建 row → 新 row 下置子列」这一模式，即可稳定构建任意复杂度的响应式网格布局。调试时建议使用浏览器开发者工具检查元素是否被正确包裹在 .row 中——这是快速定位嵌套失效问题的黄金法则。
