尺寸属性和类
Bootstrap v4 CSS 提供了几个控制元素尺寸的类，其中一些类已转换为组件上的属性。
组件 size 属性
各种组件允许使用可选大小（通过 size 属性）。以下是默认 Bootstrap v4 CSS 支持的大小。
可用大小
sm小lg大
未指定大小时，将导致正常大小的外观（通常称为 md）。
这些大小值将被转换为适当的 Bootstrap CSS 类，具体取决于所使用的组件，例如 .btn-<size> 用于按钮，.modal-<size> 用于模态，.form-control-<size> 用于表单元素，.pagination-<size> 用于分页按钮等。
断点大小
Bootstrap v4 还包括视口断点大小：xs、sm、md、lg 和 xl，它们指用户的视口宽度。
有关断点大小的详细信息，请查看 布局和网格 文档。
尺寸实用程序类
使用宽度和高度实用程序类，可以轻松地使元素与父元素一样宽或一样高（相对而言）。
宽度和高度实用程序由 Bootstrap 的 _variables.scss 中的 $sizes Sass 映射生成。默认情况下，包括对 25%、50%、75% 和 100% 的支持。根据需要修改这些值，以在此处生成不同的实用程序。
宽度
<div class="text-center">
<div class="w-25 p-3 mb-1 bg-secondary text-light">Width 25%</div>
<div class="w-50 p-3 mb-1 bg-secondary text-light">Width 50%</div>
<div class="w-75 p-3 mb-1 bg-secondary text-light">Width 75%</div>
<div class="w-100 p-3 bg-secondary text-light">Width 100%</div>
</div>
<!-- widths.vue -->高度
<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,.1)">
Height 25%
</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 50%
</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 75%
</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">
Height 100%
</div>
</div>
<!-- heights.vue -->最大宽度和高度
您还可以根据需要使用 mw-100 (max-width: 100%;) 和 mh-100 (max-height: 100%;) 实用程序。
其他资源
有关更多信息，请参阅 Bootstrap v4 官方文档网站。