网格行

希望您以前已经阅读过 Flexbox 介绍 理论，让我们更深入地了解网络系统中的 Flex 行(Rows)。

为父容器添加 .row 类后开启一个 Flex 行，为每个子元素添加一个 .col-* 类来瓜分父容器的宽度，若每个子元素都使用不带数字的 .col 类则所有子元素都等宽，它们会平分父容器的宽度。（此段不属于官方文档，下面是英文原文）

Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.（翻译不通）

等宽

例如，以下是两个网格布局，它们适用于屏幕宽度在 xs 到 xl 之间的设备上。

设置一列的宽度

Flexbox 网格列的自动布局还意味着您可以设置其中一列的宽度，其他列的宽度将自动调整。 您可以使用预定义的网格类（如下所示）或内联宽度。 请注意，无论中间列的宽度如何改变，其他列都会跟着调整大小。

可变的宽度内容

使用 col-{breakpoint}-auto 类，列可以根据其内容的自然宽度调整自身大小。 这对于单行内容（如输入、数字等）非常方便（请参阅此页面上的最后一个示例）。 结合水平对齐类，这对于在视口宽度变化时列大小不均匀的居中布局非常有用。

响应式类

网格系统拥有五个预定义的断点类，用于构建复杂的响应式布局。它们分别对应超小型、小型、中型、大型和超大型屏幕设备。您可以使用它们在不同的设备上适配合适的列大小。

断点列表

对于从最小的设备到最大的设备都相同的网格，请使用 .col 和 .col-* 类。 需要特别大的列时，请为 col 类指定数字；否则，请坚持使用 .col。

堆叠到水平

将 .col-12 和 .col-md-* 搭配结合使用，可以创建一个基础的网格系统，该系统在小型设备上会垂直堆叠布局，在桌面（中型）设备上变为水平布局。

混合匹配

不想让您的列简单地堆叠在某些网格层中吗？ 根据需要为每个层使用不同类的组合。 请参阅下面的示例，以更好地了解所有工作原理。

对齐

使用 flexbox 对齐工具可控制垂直和水平方向的对齐方式。

列换行

如果在一行中放置超过 12 列，则每组额外的列将作为一个单元换行到新行上。

排序

列偏移

使用.offset-md-* 类将列向右移动。 这些类通过 * 列增加一列的左边距。 例如， .offset-md-4 将 .col-md-4 移到四列后。

嵌套

要使用默认网格嵌套您的内容，请在现有的 .col-sm-* 列中添加一个新的 .row 和一组 .col-sm-* 列。 嵌套行应包括一组总计不超过 12 个或更少的列（不需要全部使用 12 个可用列）。

Flex 演示 （Playground）

要查看 Flex 的实际效果，您可以使用 Flex 演示（Playground）进行交互学习。