Source

يطفو

تبديل العوامات على أي عنصر ، عبر أي نقطة توقف ، باستخدام أدوات التعويم سريعة الاستجابة الخاصة بنا.

ملخص

تقوم فئات الأدوات المساعدة هذه بتعويم عنصر إلى اليسار أو اليمين ، أو تعطيل العائمة ، بناءً على حجم منفذ العرض الحالي باستخدام خاصية CSSfloat . !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>

الخلطات

أو عن طريق 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