Bootstrap 网格

维基百科说

“在平面设计中，网格是一种由一系列相交的直线（垂直、水平）组成的结构（通常是二维的），用于组织内容。它被广泛用于在印刷设计中设计布局和内容结构。在网页设计中，这是一种非常有效的方法，可以使用 HTML 和 CSS 快速有效地创建一致的布局。”

Bootstrap 网格系统

Bootstrap 网格系统允许页面最多有 12 列。您可以单独使用所有 12 列，也可以将这些列组合在一起以创建更宽的列。

Bootstrap 网格系统是响应式的，列会根据屏幕尺寸自动重新排列。

网格类

Bootstrap 网格系统中有四种类

• xs（用于手机）
• sm（用于平板电脑）
• md（用于台式机）
• lg（用于更大的台式机）

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

Bootstrap 网格的基本结构

创建 Bootstrap 网格时，请遵循以下说明

• 创建一个行 (<div class="row">)。
• 添加您想要在网格中显示的列数（带有适当的 .col-*-* 类的标签）。
• 请注意，对于每一行，.col-*-* 中的数字之和应始终为 12。

Bootstrap 网格示例

用于等宽列

用于不等宽列

Bootstrap 4 网格类

Bootstrap 4 网格系统中有 5 个类。

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

您还可以组合上述类以创建更动态和灵活的布局。

Bootstrap 4 网格的结构

请参阅 Bootstrap 4 网格的基本结构

首先创建一个行（<div class="row">），然后添加所需数量的列（带有适当的 .col-*-* 类的标签）。

在此：在 .col-*-* 中，第一个星号 (*) 代表响应性：sm、md、lg 或 xl，而第二个星号代表一个数字，每行的总和应为 12。

等宽列示例

让我们举一个例子，看看如何在所有设备和屏幕宽度上创建一个等宽列

示例

不等宽列示例

让我们举一个例子，看看如何创建一个支持平板电脑并缩放到大型额外桌面的不等宽列

示例