浆纱
使用width和height实用程序轻松地将一个元素变宽或变高。
相对于父母
宽度和高度实用程序是从 $sizes 萨斯地图 _variables.scss 。包括对 25%,50%,75%,100% ,和 auto 默认情况下。 根据需要修改这些值,以在此处生成不同的实用程序。
宽度25％
宽度50％
宽度75％
宽度100％
宽度自动
<div class="w-25 p-3" style="background-color: #eee;"> 宽度25％ </div>
<div class="w-50 p-3" style="background-color: #eee;"> 宽度50％ </div>
<div class="w-75 p-3" style="background-color: #eee;"> 宽度75％ </div>
<div class="w-100 p-3" style="background-color: #eee;"> 宽度100％ </div>
<div class="w-auto p-3" style="background-color: #eee;"> 宽度自动 </div> 身高25％
身高50％
身高75％
身高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)"> 身高25％ </div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> 身高50％ </div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> 身高75％ </div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> 身高100％ </div>
<div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)"> 自动高度 </div>
</div>你也可以使用 max-width: 100%; and max-height: 100%; 所需的实用程序。
<svg aria-label="Placeholder: Max-width 100%" class="bd-placeholder-img mw-100" focusable="false" height="100" preserveaspectratio="xMidYMid slice" role="img" width="100%" xmlns="http://www.w3.org/2000/svg"><title> 占位符 </title><rect fill="#868e96" height="100%" width="100%"></rect><text dy=".3em" fill="#dee2e6" x="50%" y="50%"> 最大宽度100％ </text></svg> 最大高度100％
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);"> 最大高度100％ </div>
</div>相对于视口
您还可以使用实用程序来设置相对于视口的宽度和高度。
