浆纱
尺码-Bootstrap 5和Material Design 2.0
使用width和height实用程序轻松地将一个元素变宽或变高。
相对于父母
宽度和高度实用程序是从 _utilities.scss
中的实用程序API生成的。
包括对 25%
, 50%
, 75%
, 100%
,
和 auto
默认。根据需要修改这些值以生成不同的值
实用程序在这里。
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<div class="w-25 p-3" style="background-color: #eee">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee">Width auto</div>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
<div
class="h-25 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 25%
</div>
<div
class="h-50 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 50%
</div>
<div
class="h-75 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 75%
</div>
<div
class="h-100 d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height 100%
</div>
<div
class="h-auto d-inline-block"
style="width: 120px; background-color: rgba(0, 0, 255, 0.1)"
>
Height auto
</div>
</div>
您还可以将 max-width:100%;
和 max-height:100%;
实用程序用作
需要。

<img src="https://mdbootstrap.com/img/new/slides/041.webp" class="mw-100" alt="..." />
Max-height 100%
<div style="height: 100px; background-color: rgba(255, 0, 0, 0.1)">
<div
class="mh-100"
style="width: 100px; height: 200px; background-color: rgba(0, 0, 255, 0.1)"
>
Max-height 100%
</div>
</div>
相对于视口
您还可以使用实用程序设置相对于视口的宽度和高度。
<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>