Source

Φλοτέρ

Εναλλαγή float σε οποιοδήποτε στοιχείο, σε οποιοδήποτε σημείο διακοπής, χρησιμοποιώντας τα βοηθητικά προγράμματα float που αποκρίνονται.

ΣΦΑΙΡΙΚΗ ΕΙΚΟΝΑ

Αυτές οι κλάσεις βοηθητικού προγράμματος μετακινούν ένα στοιχείο προς τα αριστερά ή τα δεξιά ή απενεργοποιούν τη αιώρηση, με βάση το τρέχον μέγεθος της θύρας προβολής χρησιμοποιώντας την ιδιότητα CSSfloat . !importantπεριλαμβάνεται για την αποφυγή προβλημάτων ειδικότητας. Αυτά χρησιμοποιούν τα ίδια σημεία διακοπής θυρών προβολής με το σύστημα πλέγματος μας. Λάβετε υπόψη ότι τα βοηθητικά προγράμματα float δεν επηρεάζουν τα flex αντικείμενα.

Τάξεις

Εναλλαγή ενός float με μια κλάση:

Κλείστε αριστερά σε όλα τα μεγέθη θυρών προβολής

Επιπλέετε δεξιά σε όλα τα μεγέθη θυρών προβολής

Μην επιπλέετε σε όλα τα μεγέθη θυρών προβολής 
<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