Định cỡ

Dễ dàng tạo một phần tử rộng hoặc cao bằng các tiện ích chiều rộng và chiều cao của chúng tôi.

Họ hàng với cha mẹ

Các tiện ích chiều rộng và chiều cao được tạo từ $sizesbản đồ Sass trong _variables.scss. Bao gồm hỗ trợ cho , 25%và theo mặc định. Sửa đổi các giá trị đó khi bạn cần để tạo các tiện ích khác nhau tại đây.50%75%100%auto

Chiều rộng 25%

Chiều rộng 50%

Chiều rộng 75%

Chiều rộng 100%

Chiều rộng tự động

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

Chiều cao 25%

Chiều cao 50%

Chiều cao 75%

Chiều cao 100%

Chiều cao tự động

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

Bạn cũng có thể sử dụng max-width: 100%;và max-height: 100%;các tiện ích khi cần thiết.

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

Chiều cao tối đa 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);">Max-height 100%</div>
</div>

Liên quan đến chế độ xem

Bạn cũng có thể sử dụng các tiện ích để đặt chiều rộng và chiều cao liên quan đến khung nhìn.

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