Dimensiunea

Faceți cu ușurință un element la fel de lat sau la fel de înalt (față de părintele său) cu utilitățile noastre de lățime și înălțime.

Utilitățile de lățime și înălțime sunt generate din $sizesharta Sass în _variables.scss. Include suport pentru 25%, 50%, 75%, 100%și autoimplicit. Modificați aceste valori deoarece aveți nevoie pentru a genera diferite utilități aici.

latime 25%

latime 50%

latime 75%

latime 100%

Lățimea automată

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

Inaltime 25%

Inaltime 50%

Inaltime 75%

Inaltime 100%

Înălțime automată

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

De asemenea, puteți utiliza max-width: 100%;și max-height: 100%;utilități după cum este necesar.

<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">

Înălțime maximă 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>