Φλοτέρ

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

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

<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τιμή.

<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,
      )
    ),