Bootstrap5 尺寸(Sizing)

半兽人 发表于: 2020-07-27   最后更新时间: 2021-08-01 00:15:26  
{{totalSubscript}} 订阅, 2,083 游览

尺寸(Sizing)

使用我们的宽度和高度工具,可以很容易地使一个元素变宽或变高。

相对于parent

宽度和高度的实用程序是由_utilities.scss中的实用程序接口生成的。包括对25%50%75%100%自动的默认支持。根据你的需要修改这些值,在这里生成不同的实用程序。

<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>

在线运行

<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 class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

在线运行

你也可以根据需要使用max-width: 100%;max-height: 100%;工具。

<img src="..." class="mw-100" alt="...">

在线运行

<div style="height: 100px; background-color: rgba(255,0,0,.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.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>
更新于 2021-08-01
在线,1小时前登录

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章
提问