- Bootstrap从入门到项目实战
- 李爱玲
- 131字
- 2021-03-24 20:36:52
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 等宽变换效果
等宽变换布局也可以添加响应式的设置,响应式类如下: