网格行

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

将特定于断点的列类用于等宽列。 为所需的每个断点添加任意数量的无单元类,每列的宽度将相同。

等宽(Equal-width)

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




设置一列宽度

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




可变宽度内容

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




响应式类

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

所有断点

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




堆叠到水平

结合使用.col-12.col-md-*类,您可以创建一个基本的网格系统,该系统首先堆叠在小型设备上,然后在桌面(中型)设备上变为水平。




混合并匹配

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




对齐

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







TIP

还有一个方便的flex centerCSS类,它相当于items center+justify center。它与flex, rowcolumn一起使用。

列包裹

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




重新排序







偏移列

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




嵌套

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




Flex演示(Playground)

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

Flex Playground