![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
4.7 等宽变换
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中,使用.flex-grow-1元素可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P63_2124.jpg?sign=1738969800-RKSbgBCytckK3x8USzg7cd0usH9q3ZKK-0-b1bf01e093e5904b87193dd9d1891979)
在IE 11浏览器中运行结果如图4-8所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P64_2134.jpg?sign=1738969800-nqBIXUL10riwjplvH6cwAPw7EMi8tuxs-0-743872c9a540f2f972819dfad0d0acde)
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置,响应式类如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P64_2138.jpg?sign=1738969800-P348i8g67XUhuBeNze6jd73HaNjlrHjh-0-e9bad8f91609bf4cb644fed9ec66a2eb)
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中,使用.flex-grow-1元素可以使用的所有可用空间,同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
在IE 11浏览器中运行结果如图4-8所示。
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置,响应式类如下: