Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Dydžio nustatymas

Naudodami mūsų pločio ir aukščio įrankius lengvai padarykite tokį platų arba aukštą elementą.

Tėvų atžvilgiu

Pločio ir aukščio priemonės generuojamos iš paslaugų API, esančios _utilities.scss. Pagal numatytuosius nustatymus apima 25%, 50%, 75%, 100%ir palaikymą. autoPakeiskite šias reikšmes, kad čia būtų sukurtos įvairios komunalinės paslaugos.

plotis 25 %
plotis 50 %
plotis 75 %
plotis 100 %
Automatinis plotis
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>
Aukštis 25%
Aukštis 50%
Aukštis 75%
Aukštis 100 %
Aukštis automatinis
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>

Taip pat pagal poreikį galite naudoti max-width: 100%;ir max-height: 100%;komunalines paslaugas.

Placeholder Max-width 100%
html
<img src="..." class="mw-100" alt="...">
Maksimalus aukštis 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>

Peržiūros srities atžvilgiu

Taip pat galite naudoti pagalbines priemones, kad nustatytumėte plotį ir aukštį, palyginti su peržiūros srities.

<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

Dydžio komunalinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų 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)
    ),