Bootstrap 网格系统
Bootstrap 网格系统是创建响应式网站布局的最快、最简单的方法。
什么是 Bootstrap 网格系统？
Bootstrap 网格系统提供了一种简单而强大的方法来创建各种形状和大小的响应式布局。 它是用 flexbox 构建的，采用移动优先的方法。 此外，它完全响应并使用十二列系统（每行可用 12 列）和六个默认响应层。
您可以使用 Bootstrap 的预定义网格类为不同类型的设备（如手机、平板电脑、笔记本电脑、台式机等）快速制作布局。 例如，您可以使用 .col-* 类为超小型设备（如纵向模式的手机）创建网格列，以及为横向模式的手机创建 .col-sm-* 类。
类似地，您可以使用 .col-md-* 类为平板电脑等中等屏幕设备创建网格列，为小型笔记本电脑等设备创建 .col-lg-* 类，为笔记本电脑和台式机创建 .col-xl-* 类，为大型台式机屏幕创建 .col-xxl-* 类。
下表总结了 Bootstrap 网格系统的主要特性。
| Features Bootstrap Grid System |
X-Small (xs) <576px |
Small (sm) ≥576px |
Medium (md) ≥768px |
Large (lg) ≥992px |
X-Large (xl) ≥1200px |
XX-Large (xxl) ≥1400px |
|---|---|---|---|---|---|---|
| Container max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Number of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
上表展示了一件重要的事情，将任何 .col-sm-* 类应用于元素不仅会影响小型设备，还会影响中型、大型和超大型设备（视口宽度 ≥768px )，如果不存在 .col-md-*, .col-lg-*, .col-xl-*, 或 .col-xxl-* 类。
同样，如果没有 .col-lg-*, .col-xl-*, 或 .col-xxl-* 类，.col-md-* 类不仅会影响中型设备，还会影响大型和超大型设备。
现在的问题是如何使用这个 12 列响应式网格系统创建行和列。 答案很简单，首先使用任何 容器类（例如 .container，然后使用 .row 类在容器内创建行，并在任何行内创建列，您可以使用 .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* 和 .col-xxl-* 类。
列是我们将放置内容的实际内容区域。 在接下来的部分中，我们将把所有这些东西付诸实践，看看它是如何工作的：
创建两列布局
以下示例将向您展示如何为中型、大型和超大型设备（如桌子、笔记本电脑和台式机等）创建两列布局。但是，在手机（屏幕宽度小于 768 像素）上，列将自动变为水平 （2 行，1 列）。
<div class="container">
<!--具有两个相等列的行-->
<div class="row">
<div class="col-md-6">Column left</div>
<div class="col-md-6">Column right</div>
</div>
<!--两列按 1:2 比例划分的行-->
<div class="row">
<div class="col-md-4">Column left</div>
<div class="col-md-8">Column right</div>
</div>
<!--两列按 1:3 比例划分的行-->
<div class="row">
<div class="col-md-3">Column left</div>
<div class="col-md-9">Column right</div>
</div>
</div>注意： 在网格布局中，内容必须放在列 (.col 和 .col-*) 内，并且只有列可以是行 (.row) 的直接子级。 此外，行应放置在 容器（固定或流动） 内，以进行适当的填充和对齐。
提示： 网格列宽以百分比设置，因此它们始终是流动的，并且相对于其父元素的大小。 此外，每列都有水平填充（称为装订线），用于控制各个列之间的空间。
由于 Bootstrap 网格系统是基于 12 列的，因此为了将列保持在一行中（即并排），单行内的网格列数之和不应大于 12。如果您通过 仔细查看上面的示例代码，您会发现每行的网格列数（即 col-md-*）总计为 12 个（6+6、4+8 和 3+9）。
创建三列布局
同样，您可以根据上述原理创建其他布局。 例如，以下示例通常会为笔记本电脑和台式机屏幕创建三列布局。 如果屏幕分辨率大于或等于 992 像素（例如 Apple iPad），它也适用于横向模式的平板电脑。 但是，在纵向模式下，网格列将像往常一样是水平的。
<div class="container">
<!--具有三个相等列的行-->
<div class="row">
<div class="col-lg-4">Column left</div>
<div class="col-lg-4">Column middle</div>
<div class="col-lg-4">Column right</div>
</div>
<!--三列按 1:4:1 比例划分的行-->
<div class="row">
<div class="col-lg-2">Column left</div>
<div class="col-lg-8">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
<!--三列不均匀划分的行-->
<div class="row">
<div class="col-lg-3">Column left</div>
<div class="col-lg-7">Column middle</div>
<div class="col-lg-2">Column right</div>
</div>
</div>注意：如果在一行中放置了超过 12 个网格列，则每组额外的列作为一个整体将换行。 请参阅列换行行为。
Bootstrap自动布局列
您还可以通过简单地使用.col类为所有设备（x-small、small、medium、large、x-large 和 xx-large）创建等宽列，而无需指定任何列号。
让我们试试下面的例子来了解它是如何工作的：
<div class="container">
<!--具有两个相等列的行-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--具有三个相等列的行-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>此外，您还可以设置一列的宽度，并让同级列自动调整其周围的大小。 您可以使用预定义的网格类或内联宽度。
如果您尝试以下示例，您会发现在一行中，.col 类的列具有相同的宽度。
<div class="container">
<!--具有两个相等列的行-->
<div class="row">
<div class="col">Column one</div>
<div class="col">Column two</div>
</div>
<!--三列按 1:2:1 比例划分的行-->
<div class="row">
<div class="col">Column one</div>
<div class="col-sm-6">Column two</div>
<div class="col">Column three</div>
</div>
</div>列换行行为
现在我们将创建更灵活的布局，根据视口大小更改列方向。 以下示例将在笔记本电脑和台式机等大型设备以及平板电脑（例如 Apple iPad）上以横向模式创建三列布局，但在平板电脑等中等设备上以纵向模式（768px ≤ 屏幕宽度 < 992px），它将改变 进入两列布局，其中第三列移动到前两列的底部。
<div class="container">
<div class="row">
<div class="col-md-4 col-lg-3">Column one</div>
<div class="col-md-8 col-lg-6">Column two</div>
<div class="col-md-12 col-lg-3">Column three</div>
</div>
</div>正如您在上面的示例中看到的，中等网格列数（即 col-md-*）的总和是 3 + 9 + 12 = 24 > 12，因此具有类 .col-md-12 的第三个 <div> 元素添加了超出的额外列 .row 中最多 12 列，在中型屏幕尺寸设备上作为一个连续单元换行。
同样，您可以使用 Bootstrap 的网格列环绕功能为您的网站创建更具适应性的布局。 这里有一些准备使用的Bootstrap 网格示例。
使用 Bootstrap 创建多列布局
使用新的 Bootstrap 移动优先 flexbox 网格系统，您可以轻松控制您的网站布局在具有不同屏幕或视口大小的不同类型设备（如手机、平板电脑、台式机等）上的呈现方式。让我们考虑下图。
在上图中，所有设备中共有 12 个内容框，但其位置根据设备屏幕大小而有所不同，例如在移动设备中，布局呈现为一列网格布局，其上方放置 1 列和 12 行彼此，而在平板电脑中，它呈现为两列网格布局，具有 2 列和 6 行。
此外，在笔记本电脑和台式机等大屏幕设备中，它呈现为具有 3 列和 4 行的三列网格布局，最后在大型台式机等超大屏幕设备中，它被呈现为具有 4 列的四列网格布局列和 3 行。
现在的问题是我们如何使用这个 Bootstrap flexbox 网格系统来创建这样的响应式布局。让我们从主要目标设备开始。假设我们的主要目标设备是笔记本电脑或普通台式机。由于我们的笔记本电脑布局有 3 列和 4 行，即 3x4 网格布局，所以用于制作这种网格结构的 HTML 代码看起来像这样。
<div class="container-lg">
<div class="row">
<div class="col-xl-4"><p>Box 1</p></div>
<div class="col-xl-4"><p>Box 2</p></div>
<div class="col-xl-4"><p>Box 3</p></div>
<div class="col-xl-4"><p>Box 4</p></div>
<div class="col-xl-4"><p>Box 5</p></div>
<div class="col-xl-4"><p>Box 6</p></div>
<div class="col-xl-4"><p>Box 7</p></div>
<div class="col-xl-4"><p>Box 8</p></div>
<div class="col-xl-4"><p>Box 9</p></div>
<div class="col-xl-4"><p>Box 10</p></div>
<div class="col-xl-4"><p>Box 11</p></div>
<div class="col-xl-4"><p>Box 12</p></div>
</div>
</div>提示：如果视口的宽度小于 992 像素，.container-lg 类会使容器宽度为 100%，从而在较小的屏幕上利用全部可用宽度。
如果您在屏幕或视口宽度大于或等于 1200 像素但小于 1400 像素的大型设备（例如笔记本电脑或台式机）中看到上述示例的输出，您会发现布局有 4 行，每行有 3 个相等 列导致 3x4 网格布局。
现在是时候为其他设备定制我们的布局了。 让我们首先为平板电脑等中等设备定制它（768px ≤ 视口宽度 < 1200px）。 由于在平板电脑上，我们的布局呈现为 2x6 网格（即 2 列和 6 行）。 因此，继续在每一列上添加类 .col-md-6。
<div class="container-lg">
<div class="row">
<div class="col-xl-4 col-md-6"><p>Box 1</p></div>
<div class="col-xl-4 col-md-6"><p>Box 2</p></div>
<div class="col-xl-4 col-md-6"><p>Box 3</p></div>
<div class="col-xl-4 col-md-6"><p>Box 4</p></div>
<div class="col-xl-4 col-md-6"><p>Box 5</p></div>
<div class="col-xl-4 col-md-6"><p>Box 6</p></div>
<div class="col-xl-4 col-md-6"><p>Box 7</p></div>
<div class="col-xl-4 col-md-6"><p>Box 8</p></div>
<div class="col-xl-4 col-md-6"><p>Box 9</p></div>
<div class="col-xl-4 col-md-6"><p>Box 10</p></div>
<div class="col-xl-4 col-md-6"><p>Box 11</p></div>
<div class="col-xl-4 col-md-6"><p>Box 12</p></div>
</div>
</div>提示： 为方便起见，选择您的主要目标设备并首先为该设备创建布局，然后添加类以使其对其他设备做出响应。
同样，您可以通过在每一列上添加类 .col-xxl-3 来自定义超大设备（例如大桌面屏幕）的布局，因为该布局中的每一行包含 4 列（即 4x3 网格布局）。 这是结合整个过程后的最终代码。
<div class="container-lg">
<div class="row">
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 1</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 2</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 3</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 4</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 5</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 6</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 7</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 8</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 9</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 10</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 11</p></div>
<div class="col-xl-4 col-md-6 col-xxl-3"><p>Box 12</p></div>
</div>
</div>提示：根据上图，手机不需要自定义布局； 因为在没有 .col-* 或 .col-sm-* 类的情况下，超小型设备上的列将自动变为水平并呈现为 1x12 列网格布局。
网格列的嵌套
Bootstrap 网格列也是可嵌套的，这意味着您可以将行和列放在现有列中。 但是，放置列的公式将是相同的，即单行内的列数之和应等于或小于 12。
<div class="container">
<div class="row">
<div class="col-sm-8">Column left</div>
<div class="col-sm-4">
<!--Column right with nested rows and columns-->
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
</div>
</div>
</div>创建可变宽度列
您可以使用 col-{breakpoint}-auto 类根据其内容的自然宽度调整列的大小。 试试下面的例子，看看它是如何工作的：
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-3">Column left</div>
<div class="col-md-auto">Variable width column</div>
<div class="col-md-3">Column right</div>
</div>
<div class="row">
<div class="col">Column left</div>
<div class="col-auto">Variable width column</div>
<div class="col">Column right</div>
</div>
</div>网格列的对齐方式
您可以使用 flexbox 对齐实用程序来垂直和水平对齐容器内的网格列。 尝试以下示例以了解其工作原理：
网格列的垂直对齐
您可以使用类 .align-items-start, .align-items-center, 和 .align-items-end 分别在容器的顶部、中间和底部垂直对齐网格列。
<div class="container">
<div class="row align-items-start">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-center">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
<div class="row align-items-end">
<div class="col">Column one</div>
<div class="col">Column two</div>
<div class="col">Column three</div>
</div>
</div>行内的各个列也可以垂直对齐。 这是一个例子：
<div class="container">
<div class="row">
<div class="col align-self-start">Column one</div>
<div class="col align-self-center">Column two</div>
<div class="col align-self-end">Column three</div>
</div>
</div>注意：您可以跳过 .col-* 网格类中的数字，只需使用 .col 类为所有设备创建大小相等的列 （特小、小、中、大和特大）。
网格列的水平对齐
您可以使用类 .justify-content-start, .justify-content-center, 和 .justify-content-end 分别在容器的左侧、中心和右侧水平对齐网格列。 让我们看看下面的例子，看看它是如何工作的：
<div class="container">
<div class="row justify-content-start">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-center">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-end">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>或者，您可以使用类 .justify-content-around 均匀分布网格列，两端各有一半大小的空间，而您可以使用类 .justify-content-between 均匀分布网格列，第一列放置在开头，最后一列放置在 结尾。 试试下面的例子，看看它是如何工作的：
<div class="container">
<div class="row justify-content-around">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
<div class="row justify-content-between">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
</div>
</div>请查看 css3 flexbox 上的教程，了解有关弹性项目对齐的更多信息。
重新排序网格列
您甚至可以更改网格列的视觉顺序，而无需更改它们在实际标记中的顺序。 使用类 .order-last 对列进行排序，而使用类 .order-first 对列进行排序。 我们来看一个例子：
<div class="container">
<div class="row">
<div class="col order-last">First, but ordered at last</div>
<div class="col">Second, but unordered</div>
<div class="col order-first">Last, but ordered at first</div>
</div>
</div>您还可以使用 .order-* 类根据排序号对网格列进行排序。 具有较高阶数的网格列位于具有较低阶数的网格列或没有阶数的网格列之后。 它包括对所有五个网格层的 1 到 12 的支持。
<div class="container">
<div class="row">
<div class="col order-4">First, but ordered at last</div>
<div class="col">Second, but ordered at first</div>
<div class="col order-1">Last, but ordered at second</div>
</div>
</div>偏移网格列
您还可以使用列偏移类（如 .offset-sm-*, .offset-md-*, .offset-lg-* 等）将网格列向右移动以进行对齐。
这些类通过简单地将其左边距增加指定的列数来偏移列。 例如，列 .col-md-8 上的类 .offset-md-4 将其从原始位置向右移动四列。 试试下面的例子，看看它是如何工作的：
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8"></div>
</div>
<div class="row">
<div class="col-sm-8 offset-sm-4"><!--具有 4 列偏移的列--></div>
</div>
</div>您还可以使用边距实用程序类来偏移列。 这些类在偏移宽度不固定的情况下很有用。 这是一个例子：
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 ms-auto"><!--将此列向右偏移--></div>
</div>
<div class="row">
<div class="col-auto me-auto"></div>
<div class="col-auto"><!--将此列从上一列移开--></div>
</div>
</div>注意：您可以使用类 .col-auto 创建只占用所需空间的列，即根据内容本身的列大小。
创建紧凑的列
您可以通过在 .row 上添加类 .g-0 来删除列之间的默认装订线以创建紧凑的布局。 此类删除行的负边距和所有直接子列的水平填充。 这是一个例子：
<div class="row g-0">
<div class="col-4">Column one</div>
<div class="col-4">Column two</div>
<div class="col-4">Column three</div>
</div>将列换行
您还可以通过插入带有 .w-100 类的 <div> 来创建跨多行的等宽列，您希望列在其中换行。 此外，您可以通过将 .w-100 类与 响应式显示实用程序类 组合来使这些中断响应。
<div class="container">
<!-- 在所有设备上断开列 -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
<!-- 除超大型设备外的所有设备上的分栏 -->
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="w-100 d-xl-none"></div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
</div>我们希望您已经了解新的 Bootstrap 5 网格系统的基础知识。 在接下来的几章中，您将学习如何使用这个 flexbox 网格系统创建基本的网页布局。