Bootstrap 5 网格系统详解
小白也能懂的网格布局指南
什么是网格系统？
网格系统就像Excel表格，把页面分成行和列：
- 容器：最大外层框（固定宽度）
- 行：水平容器（行）
- 列：垂直容器（单元格）
网格系统核心概念
12列布局
所有内容分成12等分，可以根据需要组合
响应式断点
xs, sm, md, lg, xl, xxl 六种屏幕尺寸
自动适配
根据屏幕尺寸自动调整布局
响应式断点对照表
| 断点 | 屏幕尺寸 | 适用设备 | 前缀 |
|---|---|---|---|
| X-Small | <576px | 手机竖屏 | col- |
| Small | ≥576px | 手机横屏 | col-sm- |
| Medium | ≥768px | 平板电脑 | col-md- |
| Large | ≥992px | 笔记本电脑 | col-lg- |
| X-Large | ≥1200px | 台式机 | col-xl- |
| XX-Large | ≥1400px | 大屏幕显示器 | col-xxl- |
核心组件详解
容器 (Container)
容器是网格系统的最外层，分为两种：
- .container：固定宽度容器，会根据屏幕大小调整宽度
- .container-fluid：100%宽度容器，始终占满屏幕宽度
.container 演示
固定宽度容器
<!– 固定宽度容器 –>
<div class=”container”>
<!– 内容在这里 –>
</div>
<!– 全宽度容器 –>
<div class=”container-fluid”>
<!– 内容在这里 –>
</div>
行 (Row)
行是列的容器，用来包裹列：
- 使用 .row 类创建
- 必须放在容器内
- 一行最多包含12列
行中的列
行中的列
<div class=”container”>
<div class=”row”>
<!– 列放在这里 –>
</div>
</div>
列 (Column)
列是实际内容的容器：
- 使用 .col-* 类创建
- 必须放在行内
- 数字表示占用多少份（总共12份）
col-3
col-6
col-3
<div class=”row”>
<div class=”col-3″>占3份</div>
<div class=”col-6″>占6份</div>
<div class=”col-3″>占3份</div>
</div>
响应式列
在不同屏幕尺寸定义不同列宽：
- 使用断点前缀：col-{breakpoint}-{number}
- 可以组合多个断点
- 从移动设备优先
md-4 sm-6
md-4 sm-6
md-4 sm-12
<div class=”row”>
<!– 中屏每行3列，小屏每行2列 –>
<div class=”col-md-4 col-sm-6″>内容1</div>
<div class=”col-md-4 col-sm-6″>内容2</div>
<!– 中屏每行3列，小屏占整行 –>
<div class=”col-md-4 col-sm-12″>内容3</div>
</div>
网格系统高级技巧
自动宽度列
使用 .col 或 .col-{breakpoint} 创建自动宽度列
自动
宽度
固定6
<div class=”row”>
<div class=”col”>自动宽度</div>
<div class=”col”>自动宽度</div>
<div class=”col-6″>固定宽度</div>
</div>
偏移列
使用 .offset-* 类创建列偏移
col-4
offset-4
<div class=”row”>
<div class=”col-4″>占4份</div>
<div class=”col-4 offset-4″>偏移4份</div>
</div>
嵌套网格
在列内再创建网格系统
外层列 (col-8)
内层列
内层列
外层列 (col-4)
<div class=”row”>
<div class=”col-8″>
<div class=”row”> <!– 内层网格 –>
<div class=”col-6″>内层列</div>
<div class=”col-6″>内层列</div>
</div>
</div>
<div class=”col-4″>外层列</div>
</div>
💡 重要提示：网格布局要点
- 容器 → 行 → 列，顺序不能错
- 一行最多12列，超过会自动换行
- 使用响应式类时，从小屏幕开始设计（移动优先）
- 列之间默认有gutter（间隔），可以用.g-0移除
- 使用Flexbox实现对齐，灵活控制布局
响应式布局实战演示
LG:2份 MD:4份 SM:6份
LG:2份 MD:4份 SM:6份
LG:2份 MD:4份 SM:6份
LG:2份 MD:4份 SM:6份
LG:2份 MD:4份 SM:6份
LG:2份 MD:4份 SM:6份
<div class=”row”>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
<div class=”col-lg-2 col-md-4 col-sm-6 col-12″>内容</div>
</div>