- Bootstrap从入门到项目实战
- 李爱玲
- 131字
- 2025-02-23 08:23:42
4.7 等宽变换
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中，使用.flex-grow-1元素可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
在IE 11浏览器中运行结果如图4-8所示。
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置，响应式类如下：
使用.flex-grow-*切换弹性项目的增长以填充可用空间。在下面的案例中，使用.flex-grow-1元素可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间。
【例4.8】等宽变换案例。
在IE 11浏览器中运行结果如图4-8所示。
图4-8 等宽变换效果
等宽变换布局也可以添加响应式的设置，响应式类如下：