bootstrap栅格系统是bootstrap框架中实现响应式布局的核心工具，它基于flexbox布局模型设计，通过预定义的类快速将页面划分为等宽的列，再结合不同屏幕尺寸的断点规则，让页面内容可以自适应不同大小的显示设备。
bootstrap栅格系统的核心组成
bootstrap栅格系统主要由三个核心部分构成，分别是容器、行和列，三者需要按照固定的嵌套关系使用，才能保证布局效果正常。
1. 容器（Container）
容器是栅格系统的最外层包裹元素，用来设置内容的整体宽度和居中对齐。bootstrap提供了两种容器类：
.container：在不同断点下设置固定的最大宽度，两侧有固定内边距.container-fluid：宽度始终为100%，占据整个父元素的宽度
2. 行（Row）
行是列的父元素，用来创建水平的列组，抵消容器的内边距，同时触发flexbox布局。行的类名为.row，使用时必须放在容器内。
3. 列（Col）
列是实际放置内容的元素，bootstrap默认将一行划分为12个等宽的列单元，通过类名为.col-*的形式定义列占据的宽度，其中*是1到12的数字，表示占据的列数。
栅格系统的断点规则
bootstrap栅格系统预设了6个响应式断点，对应不同的屏幕尺寸，开发者可以通过带断点前缀的列类，设置不同屏幕下列的占比：
| 断点类名前缀 | 对应屏幕尺寸 | 说明 |
|---|---|---|
| col- | 小于576px | 超小屏幕，如手机竖屏 |
| col-sm- | ≥576px | 小屏幕，如手机横屏 |
| col-md- | ≥768px | 中等屏幕，如平板 |
| col-lg- | ≥992px | 大屏幕，如小型桌面显示器 |
| col-xl- | ≥1200px | 超大屏幕，如大型桌面显示器 |
| col-xxl- | ≥1400px | 超超大屏幕，如宽屏显示器 |
如果只设置.col不带数字和断点前缀，列会自动平分行的剩余宽度；如果设置.col-6没有断点前缀，那么所有屏幕下该列都会占据6/12的宽度。
基础使用示例
下面是一个简单的栅格系统使用示例，实现在小屏幕下两列上下排列，在中等屏幕及以上两列左右各占一半宽度：
<!-- 引入bootstrap的css文件 -->
<link rel="stylesheet" href="https://cdn.ipipp.com/bootstrap/5.3.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<!-- 中等屏幕及以上占6列，小屏幕及以下占12列 -->
<div class="col-md-6 col-12">
<p>第一列内容</p>
</div>
<div class="col-md-6 col-12">
<p>第二列内容</p>
</div>
</div>
</div>
常见使用注意事项
- 行和列必须遵循嵌套规则：容器包含行，行包含列，不要在列外直接放置内容，也不要在行外直接放置列
- 同一行的列数总和尽量不要超过12，如果超过12，多余的列会自动换行到下一行
- 可以通过
.g-*类设置列之间的间距，比如.g-3表示设置中等大小的列间距 - 如果需要列的内容垂直居中，可以在行上添加
.align-items-center类，在列上添加.align-self-center类实现单个列的垂直居中
bootstrap栅格系统的核心优势是减少开发者手动编写媒体查询的工作量，通过预定义的类快速实现响应式布局，适合快速搭建标准化的页面结构。