Salta al contenuto principale Passa alla navigazione dei documenti
in English

Galleggiante

Attiva o disattiva i float su qualsiasi elemento, attraverso qualsiasi punto di interruzione, utilizzando le nostre utilità float reattive.

Panoramica

Queste classi di utilità spostano un elemento a sinistra o a destra, oppure disabilitano la fluttuazione, in base alla dimensione della finestra corrente utilizzando la proprietà CSSfloat . !importantè incluso per evitare problemi di specificità. Questi utilizzano gli stessi punti di interruzione del viewport del nostro sistema a griglia. Tieni presente che le utilità float non hanno effetto sugli articoli flessibili.

Inizio mobile su tutte le dimensioni della finestra

Estremità mobile su tutte le dimensioni della finestra

Non fluttuare su tutte le dimensioni della finestra
<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>

reattivo

Esistono anche variazioni reattive per ogni floatvalore.

Inizio mobile su finestre di dimensioni SM (piccole) o più larghe

Inizio mobile su finestre di dimensioni MD (medie) o più larghe

Inizio mobile su finestre di dimensioni LG (grande) o più larghe

Inizio flottante su finestre di dimensioni XL (extra-large) o più larghe

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

Ecco tutte le classi di supporto:

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

API di utilità

Le utilità mobili sono dichiarate nella nostra API delle utilità in scss/_utilities.scss. Scopri come utilizzare l'API delle utilità.

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