Φλοτέρ

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

Σε αυτήν την σελίδα

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

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

Float start σε όλα τα μεγέθη θυρών προβολής

Float end σε όλα τα μεγέθη θυρών προβολής

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

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Ευαίσθητος

Υπάρχουν επίσης αποκριτικές παραλλαγές για κάθε floatτιμή.

Float start σε θύρες προβολής μεγέθους SM (μικρό) ή μεγαλύτερο

Float start σε θύρες προβολής μεγέθους MD (μεσαίο) ή μεγαλύτερο

Float start σε θυρίδες προβολής μεγέθους LG (μεγάλο) ή μεγαλύτερο

Float start σε θύρες προβολής μεγέθους XL (εξαιρετικά μεγάλο) ή μεγαλύτερο

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Εδώ είναι όλες οι κατηγορίες υποστήριξης:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Utilities API

Τα βοηθητικά προγράμματα Float δηλώνονται στο API βοηθητικών προγραμμάτων μας σε scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),