Source

Sizing ƒe lolome

Na element aɖe nakeke alo wòakɔ abe edzi ene bɔbɔe (ne wotsɔe sɔ kple edzila) kple míaƒe kekeme kple kɔkɔme ƒe dɔwɔnuwo.

Wowɔa kekeme kple kɔkɔme ƒe dɔwɔnuwo tso $sizesSass ƒe anyigbatata me le _variables.scss. Kpekpeɖeŋunana 25%, 50%, 75%, 100%, kple autole gɔmedzedzea me hã le eme. Trɔ asi le asixɔxɔ mawo ŋu abe alesi wòhiã be nàwɔ dɔwɔnu vovovowo le afisia ene.

Kekeme 25% .
Kekeme 50% .
Kekeme 75% .
Kekeme 100% .
Kekeme ƒe 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>
Kɔkɔme 25% .
Kɔkɔme 50% .
Kɔkɔme 75% .
Kɔkɔme 100% .
Kɔkɔme 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>

Àte ŋu azã max-width: 100%;kple max-height: 100%;nuzazãwo hã ne ehiã.

Max-kekeme = 100% [1000%x100].
<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
Max-kɔkɔme 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>