Bootstrap5 网格

Bootstrap 5 网格系统

Bootstrap 的网格系统是用 Flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，可以将这些列分组在一起以创建更宽的列：

网格系统具有响应能力，并且列将根据屏幕尺寸自动重新排列。

确保总和等于或小于 12（不需要使用所有 12 个可用列）。

网格类

Bootstrap 5 网格系统有六类：

• .col-（超小型设备 - 屏幕宽度小于 576 像素）
• .col-sm-（小型设备 - 屏幕宽度等于或大于 576px）
• .col-md-（中型设备 - 屏幕宽度等于或大于 768px）
• .col-lg-（大型设备 - 屏幕宽度等于或大于 992 像素）
• .col-xl-（超大设备 - 屏幕宽度等于或大于 1200 像素）
• .col-xxl-（xxlarge 设备 - 屏幕宽度等于或大于 1400px）

可以组合上面的类来创建更加动态和灵活的布局。

提示：每个类都会按比例放大，因此如果您想为sm和md，你只需要指定sm。

Bootstrap 5 网格的基本结构

以下是 Bootstrap 5 网格的基本结构：

第一个示例：创建一行 (<div class="row">）。然后，添加所需的列数（带有适当的标签.col-*-*类）。第一个星号 (*) 代表响应能力：sm、md、lg、xl 或 xxl，而第二个星号代表一个数字，每行加起来应为 12。

第二个例子：而不是为每个添加一个数字col，让 bootstrap 处理布局，创建等宽的列：两个"col"元素 = 每列 50% 宽度，而三列 = 每列 33.33% 宽度。四列 = 25% 宽度等。您也可以使用.col-sm|md|lg|xl|xxl使列响应。

下面我们收集了一些基本 Bootstrap 5 网格布局的示例。

三等柱

以下示例演示如何在所有设备和屏幕宽度上创建三个等宽列：

响应栏

以下示例演示如何创建四个等宽列，从平板电脑开始，扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列将自动堆叠在一起:

两个不相等的响应列

以下示例展示了如何获取两个不同宽度的列，从平板电脑开始并扩展到大型额外桌面：