Source

تیرنا

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

جائزہ

یہ یوٹیلیٹی کلاسز کسی عنصر کو بائیں یا دائیں فلوٹ کرتی ہیں یا 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قدر کے لیے موجود ہیں۔

ویو پورٹ کے سائز کے SM (چھوٹے) یا چوڑے پر چھوڑ دیں۔

ویو پورٹ کے سائز کے MD (درمیانے) یا چوڑے پر چھوڑ دیں۔

ویو پورٹ کے سائز کے LG (بڑے) یا چوڑے پر چھوڑ کر فلوٹ کریں۔

ویو پورٹ سائز کے XL (اضافی بڑے) یا اس سے زیادہ چوڑے پر چھوڑ کر فلوٹ کریں۔

<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