Vés al contingut principal Saltar a la navegació de documents
Check

Commuta els flotants a qualsevol element, a qualsevol punt d'interrupció, utilitzant les nostres utilitats flotants sensibles.

En aquesta pàgina

Visió general

Aquestes classes d'utilitat fan flotar un element cap a l'esquerra o cap a la dreta, o desactiven el flotant, en funció de la mida actual de la finestra gràfica mitjançant la propietat CSSfloat . !importants'inclou per evitar problemes d'especificitat. Aquests utilitzen els mateixos punts d'interrupció de la vista que el nostre sistema de quadrícula. Tingueu en compte que les utilitats flotants no tenen cap efecte sobre els elements flexibles.

Inici flotant en totes les mides de la finestra gràfica

Extrem flotant en totes les mides de la finestra gràfica

No sureu en totes les mides de la finestra gràfica
html
<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>

Responent

També existeixen variacions de resposta per a cada floatvalor.

Inici flotant en finestres de mida SM (petites) o més amples

Inici flotant a les finestres de mida MD (mitjana) o més amples

Inici flotant en finestres de mida LG (grans) o més amples

Inici flotant a les finestres de mida XL (extragrans) o més amples

html
<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>

Aquí teniu totes les classes de suport:

  • .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

Utilitats API

Les utilitats flotants es declaren a la nostra API d'utilitats en scss/_utilities.scss. Apreneu a utilitzar l'API d'utilitats.

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