- Bootstrap从入门到项目实战
- 李爱玲
- 93字
- 2021-03-24 20:36:52
4.6 自动相等
在一系列子元素上使用.flex-fill类,来强制它们平分剩下的空间。
【例4.7】自动相等案例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P63_2114.jpg?sign=1738940463-tgTbHuF49F1B1uyvyhNrSfJdDy9aOkaX-0-ea74129d3c9dd4966df58b34bfd8cc33)
在IE 11浏览器中运行结果如图4-7所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P63_2116.jpg?sign=1738940463-nIgZDjVyDidG2jCicWCnKp5KCpE3on0P-0-37e5489beb7df10748dc01d191aae1dc)
图4-7 自动相等效果
自动相等也可以添加响应式的设置,响应式类如下:
. flex-{sm|md|lg|xl}- fill
在一系列子元素上使用.flex-fill类,来强制它们平分剩下的空间。
【例4.7】自动相等案例。
在IE 11浏览器中运行结果如图4-7所示。
图4-7 自动相等效果
自动相等也可以添加响应式的设置,响应式类如下:
. flex-{sm|md|lg|xl}- fill