Source

Maatvoering

Maak eenvoudig een element zo breed of zo hoog (ten opzichte van het bovenliggende element) met onze hulpprogramma's voor breedte en hoogte.

Hulpprogramma's voor breedte en hoogte worden gegenereerd op basis van de $sizesSass-kaart in _variables.scss. Bevat standaard ondersteuning voor 25%, 50%, 75%, 100%en auto. Wijzig die waarden omdat u hier verschillende hulpprogramma's moet genereren.

Breedte 25%

Breedte 50%

Breedte 75%

Breedte 100%

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

Hoogte 25%

Hoogte 50%

Hoogte 75%

Hoogte 100%

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

U kunt ook gebruiken max-width: 100%;en max-height: 100%;hulpprogramma's als dat nodig is.

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

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