Source

سائز کرنا

ہماری چوڑائی اور اونچائی کی افادیت کے ساتھ آسانی سے کسی عنصر کو اتنا چوڑا یا لمبا بنائیں (اس کے والدین کے نسبت)۔

چوڑائی اور اونچائی کی افادیتیں $sizesSass کے نقشے سے تیار کی گئی ہیں _variables.scss۔ 25%, 50%, 75%, 100%, اور autoبطور ڈیفالٹ کے لیے سپورٹ شامل ہے ۔ ان اقدار میں ترمیم کریں جیسا کہ آپ کو یہاں مختلف یوٹیلیٹیز پیدا کرنے کی ضرورت ہے۔

چوڑائی 25%
چوڑائی 50%
چوڑائی 75%
چوڑائی 100%
چوڑائی آٹو
<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>
اونچائی 25%
اونچائی 50%
اونچائی 75%
اونچائی 100%
اونچائی آٹو
<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>

آپ ضرورت کے مطابق استعمال max-width: 100%;اور max-height: 100%;افادیت بھی لے سکتے ہیں۔

زیادہ سے زیادہ چوڑائی = 100% [1000%x100]
<img class="mw-100" src=".../1000px100?text=Max-width%20%3D%20100%25" alt="Max-width 100%">
زیادہ سے زیادہ اونچائی 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>