Bootstrap 4 网格系统

在本文中，我们将通过各种示例详细了解 bootstrap 4 网格系统。

bootstrap 4 网格系统是什么意思？

在 Bootstrap 4 中，网格系统是响应式的。在网格系统中，列将根据屏幕大小重新排列，即小、大和超小，以及超大。在大型屏幕上，即台式机和笔记本电脑屏幕上，内容以三列组织可能看起来更好，但在小屏幕上，即平板电脑、手机等，如果内容项彼此堆叠在一起会更好。

Bootstrap 4 网格类

Bootstrap 4 网格系统有五个类

• .col- 此类用于超小设备，其中屏幕宽度小于 576px，列数为 12。此类具有水平行为，适用于纵向手机。在此容器中，宽度为无。
• .col-sm- 此类用于屏幕宽度等于或大于 576px 的小型设备，列数为 12。此类已折叠到起始位置，高于水平断点，适用于横向手机。在此容器中，宽度为 540px。
• .col-md- 此类用于屏幕宽度等于或大于 768px 的中型设备，列数为 12。此类已折叠到起始位置，高于水平断点，适用于平板电脑。在此容器中，宽度为 720px。
• .col-lg- 此类用于屏幕宽度等于或大于 992px 的大型设备，列数为 12。此类已折叠到起始位置，高于水平断点，适用于笔记本电脑。在此容器中，宽度为 960px。
• .col-xl- 此类用于屏幕宽度等于或大于 1200px 的超大设备，列数为 12。此类已折叠到起始位置，高于水平断点，适用于笔记本电脑和台式机。在此容器中，宽度为 1140px。

让我们举例说明 bootstrap 4 网格系统。

示例 1

说明

在上面的例子中，我们创建了一个 bootstrap 4 基本网格结构的例子。

输出

以下是这个例子的输出。

示例 2

说明

在上面的例子中，我们创建了一个 bootstrap 4 网格两列布局结构的例子。为此，为了创建一个两列布局结构，我们创建了一组 .col-sm 6 和 .col-sm 6，一组 .col-sm 5 和 .col-sm 7，一组 .col-sm 4 和 .col-sm 8，以及最后一组 .col-sm 9 和 .col-sm 3。

输出

以下是这个例子的输出。

示例 3

说明

在上面的例子中，我们创建了一个 bootstrap 4 网格三列布局结构的例子。为此，为了创建一个三列布局结构，我们创建了一组 .col-sm 4、.col-sm 4 和 .col-sm 4，一组 .col-sm 3、.col-sm 4 和 .col-sm 5，一组 .col-sm 2、.col-sm 8 和 .col-sm 2，以及最后一组 .col-sm 2、.col-sm 3 和 .col-sm 7。

输出

以下是这个例子的输出。