本文详解 bootstrap 中嵌套栅格的规范用法，指出常见错误（如遗漏外层 `.row`、列宽总和超 12、未重置行间距），并通过结构化代码演示如何实现左侧 8 列模块区（每行 3 张等宽卡片）、右侧 4 列日程区（每行 2 张卡片）的响应式布局。
在 Bootstrap 中构建嵌套栅格系统时，*必须严格遵守“行（.row）→ 列（`.col-）→ 行（.row`）→ 列”的层级结构**。初学者常犯的核心错误包括：
- 在 .col-* 内直接嵌套 .col-*（跳过中间 .row）；
- 子 .row 的子列总宽度超过 12（如使用多个 col-3 但未考虑换行逻辑）；
- 忽略 .row 默认的负边距（margin: 0 -15px），导致内嵌内容溢出或错位；
- 未为多行卡片添加垂直间距（如 mt-2），造成视觉粘连。
以下是一个符合规范、可直接运行的完整示例（基于 Bootstrap 5+）：
<!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>Modules</h3>
<div class="module-container">
<!-- 内嵌行：每行最多 3 个 col-4（3×4=12），自动换行 -->
<div class="row g-3"> <!-- 使用 g-3 替代手动 mt-2，语义更清晰 -->
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块一</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块二</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块三</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
<!-- 第二行卡片（自动换行，无需额外 row） -->
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块四</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块五</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
<div class="col-4">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">模块六</h6>
<p class="card-text text-muted small">描述信息</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 右侧日程区：占 4 列 -->
<div class="col-4">
<h3>Schedule</h3>
<div class="row g-3">
<div class="col-6">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">日程一</h6>
<p class="card-text text-muted small">时间：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">
<h6 class="card-title mb-2">日程二</h6>
<p class="card-text text-muted small">时间：11:00–12:30</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">日程三</h6>
<p class="card-text text-muted small">时间：14:00–15:30</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card h-100">
@@##@@
<div class="card-body d-flex flex-column">
<h6 class="card-title mb-2">日程四</h6>
<p class="card-text text-muted small">时间：16:00–17: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>✅ 关键要点总结：
- *每一级 `.col-必须包裹在.row` 内** —— 这是 Bootstrap 栅格系统的强制约束，否则负边距失效，列宽计算异常；
- *使用 `g-类（如g-3）统一控制网格间距**，替代零散的mt-2/mb-2`，提升可维护性；
- 为卡片添加 h-100 并配合 d-flex flex-column，确保多张卡片高度一致，避免参差不齐；
- 图片建议设置 object-fit: cover 和固定高度，防止因原始尺寸差异破坏布局；
- 移动端适配提示：若需在小屏下改为单列堆叠，可将 col-8 / col-4 替换为 col-md-8 / col-md-4，并在 sm 断点自动回退为 col-12。
遵循以上结构与实践，即可稳定实现清晰、响应、易扩展的嵌套栅格布局。
