Bootstrap 调整大小



Bootstrap 调整大小

Bootstrap 调整大小

用于调整元素的大小。通过使用大小调整实用程序,您可以使用我们的width和height实用程序轻松地使元素的宽度或高度(相对于其父元素)相同。包括默认情况下对25%,50%,75%和100%的支持。
宽度和高度实用程序是从_variables.scss中的$ sizes Sass映射生成的。当您需要在此处生成其他实用程序时,可以修改这些值。

按宽度调整大小

以下是按宽度调整元素大小的语法:
语法:
<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 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>

最大宽度和高度

您还可以将宽度和高度设置为最大。
最大宽度:
语法:
max-width: 100%;

最大高度:
语法:
max-height: 100%;