- Bootstrap从入门到项目实战
- 李爱玲
- 120字
- 2025-02-23 08:23:42
4.2.1 水平方向排列
对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。
【例4.2】水平方向排列案例。

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

图4-2 水平方向排列效果
水平方向布局还可以添加响应式的设置,响应式类如下:

对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。
【例4.2】水平方向排列案例。
在IE 11浏览器中运行结果如图4-2所示。
图4-2 水平方向排列效果
水平方向布局还可以添加响应式的设置,响应式类如下: