本文详解如何纯用 Bootstrap 5.2.3 的内置栅格系统（无需自定义 CSS）构建包含三级嵌套、色彩区分、等宽/等高区块的响应式布局，重点说明 row 与 col-* 的嵌套规则及常见误区。
本文详解如何纯用 bootstrap 5.2.3 的内置栅格系统（无需自定义 css）构建包含三级嵌套、色彩区分、等宽/等高区块的响应式布局，重点说明 `row` 与 `col-*` 的嵌套规则及常见误区。
在 Bootstrap 5 中，实现复杂但结构清晰的网格布局完全无需额外 CSS——关键在于严格遵循其栅格语义规则：row 必须直接包裹 col-*，而嵌套的子网格必须在 col-* 内部再次以 row 开始。这是许多初学者误用（如将 row 直接放在 row 下）导致布局错乱的根本原因。
以下是一个符合 Bootstrap 5.2.3 规范的完整示例，可精准复现三行式布局：前两行为并列三栏（4-4-4），第三行采用 8-4 分栏，且右侧 col-4 内嵌一个两行两列的子网格（每项 col-6）：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5.2.3 纯栅格布局</title>
<!-- Bootstrap 5.2.3 CSS (CDN) -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous">
</head>
<body>
<div class="container mt-4">
<!-- 第一行：三等分 -->
<div class="row mb-3">
<div class="col-4 bg-success text-white p-3">
<h1>Hello!</h1>
</div>
<div class="col-4 bg-warning p-3"></div>
<div class="col-4 bg-secondary p-3"></div>
</div>
<!-- 第二行：三等分（右下角带占位文本） -->
<div class="row mb-3">
<div class="col-4 bg-success p-3"></div>
<div class="col-4 bg-warning p-3"></div>
<div class="col-4 bg-secondary text-white p-3">.</div>
</div>
<!-- 第三行：8-4 分栏，右侧嵌套子网格 -->
<div class="row">
<div class="col-8 bg-secondary text-white p-3 d-flex align-items-center justify-content-center">
col-8
</div>
<div class="col-4">
<!-- ✅ 正确嵌套：col-4 内部再启 row -->
<div class="row g-2"> <!-- 使用 g-2 控制子网格间距 -->
<div class="col-6 bg-info p-2"></div>
<div class="col-6 bg-danger p-2"></div>
<div class="col-6 bg-danger p-2"></div>
<div class="col-6 bg-info p-2"></div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS (可选，仅需交互时启用) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"></script>
</body>
</html>? 关键注意事项：
- 嵌套层级规则：row → col-* → (row → col-*) 是唯一合法路径；禁止 row → row 或 col-* → col-*。
- 间距控制：使用 g-*（如 g-2）替代旧版 mx-*/px-*，它能统一管理行与列间隙，且响应式友好（支持 g-sm-2, g-md-3 等）。
- 垂直居中：如需内容在 col 内垂直居中，推荐 d-flex align-items-center justify-content-center（语义清晰、兼容性好），避免依赖 min-height 等非栅格方案。
- 响应式断点：所有 col-* 类（如 col-4, col-md-6）均支持断点前缀，可根据设备动态调整列宽，真正实现“一次编写，多端适配”。
✅ 总结：Bootstrap 的栅格系统是功能完备的布局引擎，而非仅用于简单分栏。只要牢记“row 只能包裹 col，嵌套从 col 内重启 row”这一铁律，并善用 g-*、d-flex 等辅助工具类，即可零 CSS 实现高度可控的多层响应式界面。
