在 Bootstrap 5 中，栅格系统被称为 Grid System。它是用于创建响应式布局的核心组件之一。下面是 Bootstrap 5 中如何使用 Grid System：
- 创建容器
要使用 Grid System，首先需要创建一个容器。Bootstrap 5 提供了两种类型的容器：.container 和 .container-fluid。.container 创建一个固定宽度的容器，而 .container-fluid 创建一个占据整个视口宽度的容器。
<div class="container">
<!-- Content here -->
</div>
<div class="container-fluid">
<!-- Content here -->
</div>- 创建行
在容器中，创建一行来放置列。Bootstrap 5 中的行使用 .row 类来创建。
<div class="container">
<div class="row">
<!-- Columns here -->
</div>
</div>- 创建列
在行中，使用 .col 类来创建列。可以在 .col 类后面添加后缀来指定列在不同屏幕大小下的宽度。例如，.col-6 表示该列在所有屏幕大小下占据 6 个网格单元。.col-lg-8 表示该列在大屏幕上占据 8 个网格单元。
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">
<!-- Content here -->
</div>
<div class="col-12 col-sm-6 col-lg-4">
<!-- Content here -->
</div>
<div class="col-12 col-sm-6 col-lg-4">
<!-- Content here -->
</div>
</div>
</div>在这个示例中，每一行有三列，分别在小屏幕、中屏幕和大屏幕上占据不同数量的网格单元。
除了指定列的宽度之外，还可以使用其他的类来添加偏移量、嵌套列、水平和垂直对齐等。
正文完