Neidio i'r prif gynnwys Neidio i lywio dogfennau
in English

Maintioli

Yn hawdd gwnewch elfen mor eang neu mor uchel â'n cyfleustodau lled ac uchder.

Perthynas i'r rhiant

Cynhyrchir cyfleustodau lled ac uchder o'r API cyfleustodau yn _utilities.scss. Yn cynnwys cefnogaeth ar gyfer 25%, 50%, 75%, 100%, ac autoyn ddiofyn. Addaswch y gwerthoedd hynny gan fod angen i chi gynhyrchu gwahanol gyfleustodau yma.

Lled 25%
Lled 50%
Lled 75%
Lled 100%
Lled 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>
Uchder 25%
Uchder 50%
Uchder 75%
Uchder 100%
Uchder 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>

Gallwch hefyd ddefnyddio max-width: 100%;a max-height: 100%;chyfleustodau yn ôl yr angen.

Placeholder Max-width 100%
<img src="..." class="mw-100" alt="...">
Uchder uchaf 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>

Mewn perthynas â'r porth gwylio

Gallwch hefyd ddefnyddio cyfleustodau i osod y lled a'r uchder o'i gymharu â'r olygfan.

<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

Utilities API

Mae sizing cyfleustodau yn cael eu datgan yn ein API cyfleustodau yn scss/_utilities.scss. Dysgwch sut i ddefnyddio'r API cyfleustodau.

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