Source

Float

Prebacite float na bilo koji element, preko bilo koje tačke prekida, koristeći naše prilagodljive uslužne programe za plutanje.

Pregled

Ove uslužne klase pomiču element lijevo ili desno, ili onemogućuju plutanje, na osnovu trenutne veličine okvira za prikaz koristeći CSS floatsvojstvo . !importantuključen je kako bi se izbjegli problemi specifičnosti. Oni koriste iste prelomne tačke prikaza kao naš sistem mreže. Imajte na umu da float uslužni programi nemaju efekta na flex stavke.

Casovi

Prebacite float sa klasom:

Lebde ulijevo na svim veličinama okvira za prikaz

Lebde desno na svim veličinama okvira za prikaz

Nemojte plutati na svim veličinama prozora 
<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>

Mixins

Ili od strane Sass mixina:

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

Responsive

Odazivne varijacije također postoje za svaku floatvrijednost.

Lebdi lijevo na prozorima veličine SM (mali) ili širi

Lebdi lijevo na prozorima veličine MD (srednji) ili širi

Lebdi lijevo na okvirima za prikaz veličine LG (veliki) ili širi

Lebdite lijevo na prozorima veličine XL (ekstra-veliki) ili širi 

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

Ovdje su sve klase podrške;

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