Bootstrap 5 是一个流行的前端框架，它提供了许多工具和组件来帮助开发者快速构建响应式网页。栅格系统是 Bootstrap 5 的核心特性之一，它允许开发者创建灵活的布局，适应不同的屏幕尺寸和设备。
栅格系统基础
Bootstrap 5 的栅格系统基于 12 列的布局，这意味着整个页面可以分成 12 个等宽的列。这些列可以通过类名来控制，使得内容能够根据不同的屏幕尺寸进行响应式布局。
容器（Container）
所有栅格系统内容都应当包裹在
.container
或
.container-fluid
类中。
.container
提供固定宽度，而
.container-fluid
则使内容铺满整个视口。
行（Row）
行（
.row
）是用于包含列的水平容器。所有列都必须放在行内。
列（Col）
列（
.col-
）是实际包含内容的地方。通过为列添加类名，可以控制列所占的栅格宽度。
响应式设计
Bootstrap 5 的栅格系统支持响应式设计，这意味着布局会根据屏幕尺寸自动调整列的宽度。
响应式类
Bootstrap 提供了一系列响应式类，例如
.col-xs-
,
.col-sm-
,
.col-md-
,
.col-lg-
,
.col-xl-
，这些类名分别对应不同的屏幕尺寸。
媒体查询
Bootstrap 使用媒体查询来自动调整列的宽度。开发者也可以自定义媒体查询，以适应特定的设计需求。
@media (max-width: 768px) {
.col-md-4 { width: 100%; }
}
进阶技巧
偏移（Offsets）
偏移（
.offset-
）类可以用来在列之间添加空间，从而实现内容的对齐。
嵌套（Nesting）
可以在列内部嵌套行，以创建更复杂的布局。
列排序（Order）
列排序（
.order-
）类可以用来改变列的顺序。
总结
掌握 Bootstrap 5 的栅格系统，可以帮助开发者快速创建灵活且响应式的网页布局。通过使用行、列、偏移、嵌套和排序等技巧，可以构建出满足各种设计需求的网页。