- Bootstrap从入门到项目实战
- 李爱玲
- 302字
- 2025-02-23 08:23:42
5.4.1 相对于父元素
相对于父元素的宽度和高度样式类是由_variables.scss文件中$sizes变量来控制的,默认值包括25%、50%、75%、100%和auto。用户可以调整这些值,定制不同的规格。
具体的样式代码如下:

提示
.w-auto为宽度自适应类,.h-auto为高度自适应类。
【例5.15】相对于父元素。

在IE 11浏览器中运行结果如图5-16所示。

图5-16 相对于父元素
除了上面这些类以外,还可以使用以下两个类:

其中.mw-100类设置最大宽度,.mh-100类设置最大高度。这两个类多用来设置图片。例如,在一个元素盒子的尺寸是固定的,而要包含的图片的尺寸不确定的情况下,便可以设置.mw-100和.mh-100类,使图片不会因为尺寸过大而撑破元素盒子,影响页面布局。
【例5.16】最大宽度和高度示例。

在IE 11浏览器中运行结果如图5-17所示。

图5-17 最大宽度和高度效果