希望您已经阅读过 Flexbox 介绍 理论，让我们更深入地了解网格系统中的行（Rows）。

利用与断点相关的列类可以实现等宽列。为每个需要的断点添加不带数字的 .col 类，所有列就会等宽分配。

等宽

例如，以下两种网格布局适用于从 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 演示

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