Source

Titobi

Ni irọrun ṣe nkan kan bi fife tabi bi giga (i ibatan si obi rẹ) pẹlu iwọn ati awọn ohun elo giga wa.

Iwọn ati awọn ohun elo giga jẹ ipilẹṣẹ lati $sizesmaapu Sass ni _variables.scss. Pẹlu atilẹyin fun 25%, 50%, 75%, 100%ati autonipasẹ aiyipada. Ṣe atunṣe awọn iye wọnyẹn bi o ṣe nilo lati ṣe agbekalẹ awọn ohun elo oriṣiriṣi nibi.

Ìbú 25%
Ìbú 50%
Ìbú 75%
Ìbú 100%
Aifọwọyi iwọn 
<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>
Giga 25%
Giga 50%
Giga 75%
Giga 100%
Ọkọ ayọkẹlẹ giga 
<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>

O tun le lo max-width: 100%;ati max-height: 100%;awọn ohun elo bi o ṣe nilo.

Iwọn ti o pọju = 100% [1000% x100] 
<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
Iwọn giga julọ 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>