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