Định cỡ

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

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 class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

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>