Bootstrap/float

فعِّل أدوات التعويم (Float) المتجاوبة التي يوفّرها إطار العمل Bootstrap على أي عنصُر تختاره عبر أي نقطة حديّة.

نظرة عامّة

تعوِّم الأصناف الخدميّة المذكورة في هذه الصفحة عناصر صفحة الويب يسارًا أو يمينًا، أو تعطِّل تعويم العناصر بناءً على قياس إطار العرض الحاليّ باستخدام خاصيّة float في CSS. تُضمَّن الراية ‎!important لتفادي مشاكل درجة التحديد. تستخدم الأصناف نفس النقاط الحديّة الموجودة في نظام الشبكة الذي يقدّمه إطار العمل Bootstrap.

الأصناف

حدِّد حالة تعويم العناصر باستخدام الأصناف التاليّة:

<div class="float-left">تعويم العنصُر إلى اليسار على جميع قياسات الشاشة</div><br>
<div class="float-right">تعويم العنصُر إلى اليمين على جميع قياسات الشاشة</div><br>
<div class="float-none">عدم تعويم العنصُر على جميع قياسات الشاشة</div>

مخاليط Sass

يمكن الحصول على النتائج نفسها باستخدام مخاليط Sass:

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

التنويعات المتجاوبة

توجد تنويعات متجاوبة لكلّ قيمة من قيم float.

<div class="float-sm-left">التعويم إلى اليسار على إطارات العرض الصغيرة فأعرض</div><br>
<div class="float-md-left">التعويم إلى اليسار على إطارات العرض المتوسّطة فأعرض</div><br>
<div class="float-lg-left">التعويم إلى اليسار على إطارات العرض العريضة فأعرض</div><br>
<div class="float-xl-left">التعويم إلى اليسار على إطارات العرض العريضة جدَّا فأعرض</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

مصادر

• صفحة Float في توثيق Bootstrap.