- Bootstrap从入门到项目实战
- 李爱玲
- 131字
- 2021-03-24 20:36:52
4.7 等宽变换
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中,使用.flex-grow-1元素可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P63_2124.jpg?sign=1738941393-ZeDEYHbwzi1TApYXjUn95oYTmiaiapAS-0-9867e52da3773de79ff13a67deccc17a)
在IE 11浏览器中运行结果如图4-8所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P64_2134.jpg?sign=1738941393-cEtxtiBkjVMDU9bo8fec4vHikqA6bm2w-0-b33765737ad88d894e5282c2456a0715)
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P64_2138.jpg?sign=1738941393-VxiZU5oYzHXvYgUJpec454ecZwUdgrQ3-0-8fda01a2168295ed47040869089d13f7)
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中,使用.flex-grow-1元素可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
在IE 11浏览器中运行结果如图4-8所示。
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置,响应式类如下: