大小规格 Sizing props and classes

Bootstrap v4提供了一系列用于控制对象大小的方法，同样适用于BootstrapVue。

组件size属性

各种组件都允许一个可选的尺寸（通过size属性）。 以下是默认的Bootstrap v4 CSS支持的大小。

可用大小:

  • sm small
  • lg large

如果未指定大小，则会导致正常大小的外观（通常称为md）。

这些大小值将转换为相应的引导CSS类，具体取决于使用的组件，例如.btn-<size>用于按钮， .modal-<size>用于模式，.form-control-<size>用于表单元素， .pagination-<size>用于分页按钮等。

Breakpoint 大小

Bootstrap v4还包括视口Breakpoint大小：xs, sm, md, lg,和 xl。 指的是用户视口的宽度。

有关breakpoint大小的详细信息，请查看布局和网格文档。

调整实用程序类

使用width和height实用程序类，可以轻松地使元素的宽度和高度相同（相对于其父元素）。

Width和height实用程序是从Bootstrap的_variables.scss中的$sizes Sass映射生成的。 默认情况下包括25%, 50%, 75%, 和 100%的支持。根据需要修改这些值以在此处生成不同的实用程序。

Widths:

Width 25%
Width 50%
Width 75%
Width 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>

Heights:

Height 25%
Height 50%
Height 75%
Height 100% 
<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>

最大 width and height:

您还可以根据需要使用mw-100 (max-width: 100%;)和 mh-100 (max-height: 100%;）实用程序。

额外资源

有关更多信息，请参阅Bootstrap v4官方文档站点。