宽度工具
| 类名 | 宽度 |
|---|
.w-25 | 25% |
.w-50 | 50% |
.w-75 | 75% |
.w-100 | 100% |
.w-auto | auto |
.mw-100 | 最大宽度 100% |
<div class="w-25 p-3 bg-light border">宽度 25%</div>
<div class="w-50 p-3 bg-light border">宽度 50%</div>
<div class="w-75 p-3 bg-light border">宽度 75%</div>
<div class="w-100 p-3 bg-light border">宽度 100%</div>
高度工具
| 类名 | 高度 |
|---|
.h-25 | 25% |
.h-50 | 50% |
.h-75 | 75% |
.h-100 | 100% |
.h-auto | auto |
.mh-100 | 最大高度 100% |
<div style="height:200px" class="bg-light">
<div class="h-25 bg-primary text-white p-2">高度 25%</div>
<div class="h-50 bg-success text-white p-2">高度 50%</div>
<div class="h-75 bg-info text-white p-2">高度 75%</div>
<div class="h-100 bg-warning p-2">高度 100%</div>
</div>
视口尺寸
| 类名 | 说明 |
|---|
.min-vw-100 | 最小宽度 100vw（视口宽度） |
.min-vh-100 | 最小高度 100vh（视口高度） |
.vw-100 | 宽度 100vw |
.vh-100 | 高度 100vh |
<div class="min-vh-100">至少占满整个视口高度</div>