Source

Pluti

Comutați flotanți pe orice element, peste orice punct de întrerupere, folosind utilitarele noastre de răspuns.

Prezentare generală

Aceste clase de utilitate plasează un element la stânga sau la dreapta sau dezactivează flotarea, pe baza dimensiunii actuale a ferestrei de vizualizare folosind proprietatea CSSfloat . !importanteste inclus pentru a evita problemele de specificitate. Acestea folosesc aceleași puncte de întrerupere ca și sistemul nostru de grilă. Vă rugăm să rețineți că utilitățile flotante nu au niciun efect asupra articolelor flexibile.

Clase

Comutați un float cu o clasă:

Flotează la stânga pe toate dimensiunile ferestrelor de vizualizare

Plutește direct pe toate dimensiunile ferestrelor de vizualizare

Nu plutiți pe toate dimensiunile ferestrelor de vizualizare 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mixine

Sau prin Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Receptiv

Există și variații de răspuns pentru fiecare floatvaloare.

Flotați la stânga pe ferestrele de dimensiune SM (mici) sau mai largi

Flotați la stânga pe ferestrele de dimensiune MD (medie) sau mai largi

Flotați la stânga pe ferestrele de dimensiune LG (mari) sau mai largi

Flotați la stânga pe ferestrele de dimensiune XL (extra-mari) sau mai largi 

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

Aici sunt toate clasele de suport;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none