- Bootstrap从入门到项目实战
- 李爱玲
- 120字
- 2021-03-24 20:36:50
4.2.1 水平方向排列
对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。
【例4.2】水平方向排列案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P57_1991.jpg?sign=1738941767-VHL2aoYdcjZR0gW2ywAsdzIuOIyPrcQf-0-db87657324b44aa5e047357cb3f7cf37)
在IE 11浏览器中运行结果如图4-2所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P57_1993.jpg?sign=1738941767-eYzfjJ3IRS3d8vxecbw6FFrnV73w6CWi-0-4843279f6fbc37e6a64c1eae6e35c59f)
图4-2 水平方向排列效果
水平方向布局还可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P57_11415.jpg?sign=1738941767-TwJgs0yGWmrBBriKVXcN4Ij6HntrrpQH-0-bd124ffe55142814868cdf4b49eec64c)
对于水平方向的排列,使用.flex-row设置子项目从左到右进行排列,是默认值;使用.flex-row-reverse设置子项目从右侧开始排列。
【例4.2】水平方向排列案例。
在IE 11浏览器中运行结果如图4-2所示。
图4-2 水平方向排列效果
水平方向布局还可以添加响应式的设置,响应式类如下: