自学教程Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
我们也可以根据自己的需要，定义列数：
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。
请确保每一行中列的总和等于或小于 12。
网格类
Bootstrap 5 网格系统有以下 6 个类:
- .col- 针对所有设备。
- .col-sm- 平板 - 屏幕宽度等于或大于 576px。
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px。
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px。
- .col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
- .col-xxl- 超大桌面显示器 - 屏幕宽度等于或大于 1400px。
网格系统规则
Bootstrap5 网格系统规则:
- 我们的网格支持六个响应断点。 断点基于最小宽度媒体查询，这意味着它们会影响该断点及其上的所有断点（例如，col-sm-4适用于sm、md、lg、xl和xxl）。这意味着您可以通过每个断点控制容器和列的大小以及行为。
- 容器居中并水平放置内容。 使用
.container表示响应像素宽度，.container-fluid表示宽度：100%覆盖所有视口和设备，或使用响应容器（例如..container-md)）表示流体和像素宽度的组合。 - 行是列的包装器。 每列都有水平填充（称为间隙），用于控制它们之间的间距。然后在具有负边距的行上抵消此填充，以确保列中的内容在视觉上与左侧对齐。行还支持修改器类来统一应用列大小调整，并支持边距类来更改内容的间距。
- 列非常灵活。 每行有12个模板列可用，允许您创建跨任意列数的不同元素组合。列类表示要跨越的模板列的数量（例如，
col-4跨越四个列）。宽度是按百分比设置的，因此相对大小总是相同的。 - 间隙也响应和定制。 所有断点上都可以使用Gutter类，其大小与边距和填充间距相同。将水平间隙更改为.gx-*类，将垂直间隙更改为.gy-*类，或将所有间隙更改为.g-*类。g-0也可用于移除间隙。
- Sass 变量、Maps和Mixins为网格提供动力。如果你不想在 Bootstrap 中使用预定义的网格类，你可以使用我们网格的源 Sass 来创建你自己的带有更多语义标记的类。我们还包括一些 CSS 自定义属性来使用这些 Sass 变量，为您提供更大的灵活性。
- Bootstrap 5 和 Bootstrap 4 使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如果您想了解有关 Flexbox 的更多信息，可以阅读我们的 CSS Flexbox 教程 。
下表总结了 Bootstrap 网格系统如何在不同设备上工作的：
|
超小设备 <576px |
平板 ≥576px |
桌面显示器 ≥768px |
大桌面显示器 ≥992px |
特大桌面显示器 ≥1200px |
超大桌面显示器 ≥1400px |
|
|---|---|---|---|---|---|---|
| 容器最大宽度 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| 列数量和 | 12 | |||||
| 间隙宽度 | 1.5rem （一个列的每边分别 .75rem） | |||||
| 可嵌套 | Yes | |||||
| 列排序 | Yes | |||||
我们将上述的类组合使用，从而创建更灵活的页面布局。
提示：每个类都是按比例放大的，所以如果你想设置 sm 和 md 具有相同的宽度，你只需要指定 sm 即可。
Bootstrap 5 网格的基本结构
以下代码为 Bootstrap 5 网格的基本结构:
Bootstrap5 网格基本结构
<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div class="row">
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>第一个例子：创建一行(<div class="row">)。然后， 添加需要的列( .col-*-* 类中设置)。 第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。
第二个例子: 不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。
接下来我们可以看看实例。
自动布局列
利用特定于断点的列类来轻松调整列大小，而不需要显式的编号类，如.col-sm-6。
创建相等宽度的列
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>设置某一列宽度
如果只设置一列的宽度，其他列会自动均分剩下的宽度。 以下实例将列宽度为 25%、50%、25%：
<div class="row">
<div class="col">col</div>
<div class="col-6">col-6</div>
<div class="col">col</div>
</div>设置可变宽度
使用col-{breakpoint}-auto类根据列内容的自然宽度调整列的大小。
<div class="container-fluid mt-3">
<h2>设置可变宽度</h2>
<p>使用col-{breakpoint}-auto类根据列内容的自然宽度调整列的大小 ：</p>
<div class="row justify-content-md-center">
<div class="col col-lg-2 bg-success">
1 of 3
</div>
<div class="col-md-auto bg-warning">
可变宽 - col-md-auto
</div>
<div class="col col-lg-2 bg-primary">
3 of 3
</div>
</div>
<div class="row">
<div class="col bg-secondary">
1 of 3
</div>
<div class="col-md-auto bg-danger">
可变宽 - col-md-auto
</div>
<div class="col col-lg-2 bg-info">
3 of 3
</div>
</div>
</div>响应类
Bootstrap的网格包括六层预定义的类，用于构建复杂的响应性布局。在您认为合适的超小型、小型、中型、大型或超大型设备上自定义列的大小。
所有断点
对于从最小设备到最大设备都相同的网格，请使用.col和.col-*类。当需要特别大的列时，指定一个大小编号的类；否则，请随意设置。
<div class="container-fluid mt-3">
<h2>设置相同网格和特定大小网格</h2>
<div class="row">
<div class="col bg-success" >col</div>
<div class="col bg-warning">col</div>
<div class="col bg-primary">col</div>
<div class="col bg-secondary">col</div>
</div>
<div class="row">
<div class="col-8 bg-danger">col-8</div>
<div class="col-4 bg-info">col-4</div>
</div>
</div>等宽响应式列
以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>不等宽响应式列
以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>混合和匹配
不希望列简单地堆叠在一些网格层中吗？根据需要为每一层使用不同类的组合。请参阅下面的示例，以更好地了解其工作原理
<div class="container-fluid mt-3">
<h2>Grid混合和匹配</h2>
<!-- 通过使一个全宽和另一个半宽来堆叠移动设备上的列 -->
<div class="row">
<div class="col-md-8 bg-success">.col-md-8</div>
<div class="col-6 col-md-4 bg-warning">.col-6 .col-md-4</div>
</div>
<!-- 列在移动设备上的宽度为 50%，在桌面设备上增加到 33.3% 的宽度 -->
<div class="row">
<div class="col-6 col-md-4 bg-primary">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 bg-secondary">.col-6 .col-md-4</div>
<div class="col-6 col-md-4 bg-danger">.col-6 .col-md-4</div>
</div>
<!-- 在移动设备和桌面设备上，列始终为 50% 宽 -->
<div class="row">
<div class="col-6 bg-info">.col-6</div>
<div class="col-6 bg-success">.col-6</div>
</div>
</div>每行2列
<div class="container-fluid mt-3">
<h2>Grid 行和列 每行2列</h2>
<div class="row row-cols-2">
<div class="col bg-success">Column</div>
<div class="col bg-warning">Column</div>
<div class="col bg-info">Column</div>
<div class="col bg-secondary">Column</div>
</div>
</div>每行3列
<div class="container-fluid mt-3">
<h2>Grid 行和列 每行3列</h2>
<div class="row row-cols-3">
<div class="col bg-success">Column</div>
<div class="col bg-warning">Column</div>
<div class="col bg-info">Column</div>
<div class="col bg-secondary">Column</div>
</div>
</div>每行4列
<div class="container-fluid mt-3">
<h2>Grid 行和列 每行4列</h2>
<div class="row row-cols-4">
<div class="col bg-success">Column</div>
<div class="col bg-warning">Column</div>
<div class="col bg-info">Column</div>
<div class="col bg-secondary">Column</div>
</div>
</div>每行可变宽
<div class="container-fluid mt-3">
<h2>Grid 行和列 每行可变宽</h2>
<div class="row row-cols-auto">
<div class="col bg-success">Column</div>
<div class="col bg-warning">Column</div>
<div class="col bg-info">Column</div>
<div class="col bg-secondary">Column</div>
</div>
</div>还可以使用随附的 Sass mixin， row-cols（）：
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}平板和桌面端
以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>RUNOOPS</p>
</div>
<div class="col-sm-9 col-md-6">
<p>自学教程</p>
</div>
</div>
</div>平板、桌面、大桌面显示器、超大桌面显示器
以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 p-3 bg-primary text-white">.col</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 p-3 bg-dark text-white">.col</div>
</div>嵌套列
要使用默认网格嵌套内容，请在现有的.col sm-*列中添加一个新的.row和一组.col sm-*列。嵌套行应包含一组最多12个或更少的列（不要求使用所有12个可用列）。
<div class="container-fluid mt-3">
<h2>Grid row 嵌套</h2>
<div class="row">
<div class="col-sm-3 bg-success">
Level 1: .col-sm-3
</div>
<div class="col-sm-9 bg-warning">
<div class="row m-3">
<div class="col-8 col-sm-6 bg-info">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 bg-secondary">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>以下实例创建两列布局，其中一列内嵌套着另外两列：
<div class="row">
<div class="col-8">
.col-8
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
<div class="col-4">.col-4</div>
</div>偏移列
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>Sass
使用Bootstrap程序的源Sass文件时，可以选择使用Sass变量和mixin来创建自定义、语义和响应页面布局。我们预定义的网格类使用这些相同的变量和mixin来为快速响应的布局提供一整套现成的类。
变量
变量和映射决定了列数、槽宽度以及开始浮动列的媒体查询点。我们使用这些来生成上面记录的预定义网格类，以及下面列出的定制mixin。
$grid-columns: 12;
$grid-gutter-width: 1.5rem;$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);Mixins
Mixins与网格变量一起使用，为单个网格列生成语义CSS。
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);例子
您可以将变量修改为自己的自定义值，或者只使用带有默认值的mixin。下面是一个使用默认设置创建两列之间有间隙的布局的示例。
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>自定义网格
使用我们内置的网格Sass变量和映射，可以完全定制预定义的网格类。更改层数、媒体查询维度和容器宽度，然后重新编译。
列和间隙
可以通过Sass变量修改网格列的数量$grid columns用于生成每个单独列的宽度（以百分比为单位），而$grid gutter width用于设置列间隙的宽度
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;网格层
除了列本身之外，还可以自定义网格层的数量。如果您只需要四个网格层，您可以将$grid breakpoints和$container max widths更新为如下内容：
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);对Sass变量或映射进行任何更改时，需要保存更改并重新编译。这样做将输出一组全新的预定义网格类，用于列宽、偏移和排序。响应可见性实用程序也将更新为使用自定义断点。确保以px（而不是rem、em或%）设置网格值。