Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
Check
in English

Хэмжээ тогтоох

Өргөн болон өндрийн хэрэгслүүдийн тусламжтайгаар аль нэг элементийг өргөн эсвэл өндөртэй болгоход хялбар байдаг.

Эцэг эхтэйгээ холбоотой

Өргөн ба өндрийн хэрэглүүрүүд нь _utilities.scss. 25%, 50%, 75%, 100%, болон autoөгөгдмөлөөр дэмжлэгийг агуулдаг. Энд өөр хэрэгслүүд үүсгэх шаардлагатай тул эдгээр утгыг өөрчил.

Өргөн 25%
Өргөн 50%
Өргөн 75%
Өргөн 100%
Автомат өргөн
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>
Өндөр 25%
Өндөр 50%
Өндөр 75%
Өндөр 100%
Автомат өндөр
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>

Та мөн шаардлагатай бол хэрэгслүүдийг ашиглаж max-width: 100%;болно max-height: 100%;.

Placeholder Max-width 100%
html
<img src="..." class="mw-100" alt="...">
Хамгийн их өндөр 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>

Харах цонхтой холбоотой

Та мөн харах цонхтой харьцуулахад өргөн ба өндрийг тохируулахын тулд хэрэгслүүдийг ашиглаж болно.

<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

Хэмжээний хэрэгслүүдийг манай хэрэгслүүдийн API-д зарласан scss/_utilities.scss. 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)
    ),