Source

سەرئاو کەوتن

فلۆتەکان لەسەر هەر توخمێک بگۆڕە، لە سەرانسەری هەر خاڵێکی شکاندن، بە بەکارهێنانی سوودمەندییەکانی فلۆتی وەڵامدەرەوەمان.

تێڕوانینێکی گشتی

ئەم پۆلە سوودبەخشانە توخمێک بۆ لای چەپ یان ڕاست دەسوڕێنەوە، یان هەڵدەفڕێن لەکاردەخەن، بە پشتبەستن بە قەبارەی دەرچەی بینینی ئێستا بە بەکارهێنانی تایبەتمەندی CSSfloat . !importantبۆ ئەوەی کێشەی تایبەتمەندی ڕوونەدات، لەخۆدەگرێت. ئەمانە هەمان خاڵەکانی شکاندنی ڕوانگە بەکاردەهێنن وەک سیستەمی تۆڕەکەمان. تکایە ئاگاداربن خزمەتگوزارییەکانی فلۆت هیچ کاریگەرییەکیان لەسەر شتە فلیکسەکان نییە.

پۆلەکان

فلۆتێک بە پۆلێک بگۆڕە:

لەسەر هەموو قەبارەکانی viewport بە چەپ هەڵدەفڕێت

بەلای ڕاستدا لەسەر هەموو قەبارەکانی viewport هەڵدەفڕێت

لەسەر هەموو قەبارەکانی viewport مەشۆ
<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>

میکسینەکان

یان لەلایەن Sass mixin:

.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