تیرنا

ہماری ریسپانسیو فلوٹ یوٹیلیٹیز کا استعمال کرتے ہوئے کسی بھی عنصر پر، کسی بھی بریک پوائنٹ پر فلوٹس کو ٹوگل کریں۔

جائزہ

یہ یوٹیلیٹی کلاسز کسی عنصر کو بائیں یا دائیں فلوٹ کرتی ہیں یا CSS floatپراپرٹی کا استعمال کرتے ہوئے موجودہ ویو پورٹ سائز کی بنیاد پر فلوٹنگ کو غیر فعال کرتی ہیں۔ !importantمخصوص مسائل سے بچنے کے لیے شامل کیا گیا ہے۔ یہ وہی ویو پورٹ بریک پوائنٹس استعمال کرتے ہیں جیسے ہمارے گرڈ سسٹم۔ براہ کرم آگاہ رہیں کہ فلوٹ یوٹیلیٹیز کا فلیکس آئٹمز پر کوئی اثر نہیں ہوتا ہے۔

کلاسز

کلاس کے ساتھ فلوٹ کو ٹوگل کریں:

<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

مکسنس

یا بذریعہ ساس مکس:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

جوابدہ

جوابی تغیرات بھی ہر floatقدر کے لیے موجود ہیں۔

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

یہاں تمام سپورٹ کلاسز ہیں؛

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none