Source

سائز کرنا

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

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

چوڑائی 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>
اونچائی 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>

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

زیادہ سے زیادہ چوڑائی = 100% [1000%x100]
<img class="mw-100" src="..." 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>