Đị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.

Trên trang này

Họ hàng với cha mẹ

Các tiện ích chiều rộng và chiều cao được tạo từ API tiện ích trong _utilities.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

html

<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

html

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

html

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

Chiều cao tối đa 100%

html

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

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>

Sass

API tiện ích

Các tiện ích định cỡ được khai báo trong API tiện ích của chúng tôi trong scss/_utilities.scss. Tìm hiểu cách sử dụng API tiện ích.

    "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)
    ),