网格列

希望您以前已经阅读过Flexbox介绍理论,让我们更深入地了解列.

将特定于断点的行类用于等高行。 为所需的每个断点添加任意数量的无单元类,并且每一行的高度均相同。

等高(Equal-height)

例如,以下是两个网格布局,它们适用于从xs到xl的每个设备和视口。

Equal Height Example

设置一行高度

flexbox网格行的自动布局还意味着您可以设置一行的高度,其他行将自动调整其大小。 您可以使用预定义的网格类别(如下所示)或内联高度。 请注意,不管中间行的高度如何,其他行都会调整大小。

Setting one row height

可变高度内容

使用col-{breakpoint}-auto类,行可以根据其内容的自然高度调整自身大小。 这对于单行内容(例如输入、数字等)非常方便。结合水平对齐类,这对于在视口高度变化时行大小不均匀的居中布局非常有用。

Variable height content

响应式类

网格包括五层预定义的类,用于构建复杂的响应式布局。 在您认为合适的超小型、小型、中型、大型或超大型设备上自定义行的大小。

所有断点

对于从最小的设备到最大的设备相同的网格,请使用.col.col-*类。 当您需要特别大的行时,请指定编号的类; 否则,请坚持使用.col。

All breakpoints

混合并匹配

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

Mix and match

对齐

使用flexbox对齐工具可垂直和水平对齐列。

Horizontal alignment
Vertical alignment

包裹

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

Wrapping

重新排序

Reverse
Flex order

嵌套

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

Nesting

Flex网格演示(Playground)

要查看Flex的实际效果,您可以使用Flex演示(Playground)交互地了解更多信息。

Flex Playground