相對於父元素
寬度和高度通用類別從
_utilities.scss
中產生。預設包含
25%
,
50%
,
75%
,
100%
和
auto
。按你的需求調整這些值，可產生不同的屬性。
Width 25%
Width 50%
Width 75%
Width 100%
Width auto
<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>
Height 25%
Height 50%
Height 75%
Height 100%
Height auto
<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="...">
Max-height 100%
<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>
Utilities API
Sizing utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.
"width": (
property: width,
class: w,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
"max-width": (
property: max-width,
class: mw,
values: (100: 100%)
"viewport-width": (
property: width,
class: vw,
values: (100: 100vw)
"min-viewport-width": (
property: min-width,
class: min-vw,
values: (100: 100vw)
"height": (
property: height,
class: h,
values: (
25: 25%,
50: 50%,
75: 75%,
100: 100%,
auto: auto
"max-height": (
property: max-height,
class: mh,
values: (100: 100%)
"viewport-height": (
property: height,
class: vh,
values: (100: 100vh)
"min-viewport-height": (
property: min-height,
class: min-vh,
values: (100: 100vh)
Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
Code licensed MIT, docs CC BY 3.0.
Currently v5.0.0.
Links
Examples
Themes
Guides
Getting started
Starter template
Webpack
Parcel
Projects
Bootstrap 5
Bootstrap 4
Icons
npm starter
Community
Issues
Discussions
Corporate sponsors
Open Collective
Slack
Stack Overflow
