Flota

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.

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

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