- Bootstrap从入门到项目实战
- 李爱玲
- 106字
- 2025-02-23 08:23:42
4.2.2 垂直方向排列
使用.flex-column设置垂直方向布局,使用.flex-column-reverse实现垂直方向的反转布局(从底向上铺开)。
【例4.3】垂直方向排列案例。

在IE 11浏览器中运行结果如图4-3所示。

图4-3 垂直方向排列效果
垂直方向布局也可以加响应式的设置,响应式类如下:

使用.flex-column设置垂直方向布局,使用.flex-column-reverse实现垂直方向的反转布局(从底向上铺开)。
【例4.3】垂直方向排列案例。
在IE 11浏览器中运行结果如图4-3所示。
图4-3 垂直方向排列效果
垂直方向布局也可以加响应式的设置,响应式类如下: