Source

Plutati

Prebacite float na bilo kojem elementu, preko bilo koje prijelomne točke, koristeći naše responzivne pomoćne programe za float.

Pregled

Ove uslužne klase lebde element ulijevo ili udesno, ili onemogućuju plutanje, na temelju trenutne veličine prozora pomoću CSS floatsvojstva . !importantje uključen kako bi se izbjegli problemi specifičnosti. Oni koriste iste prijelomne točke prikaza kao i naš mrežni sustav. Imajte na umu float pomoćni programi nemaju utjecaja na flex stavke.

Nastava

Zamijeni float s klasom:

Plutanje ulijevo na svim veličinama okvira za prikaz

Plutanje udesno na svim veličinama okvira za prikaz

Nemojte lebdjeti na svim veličinama okvira za prikaz 
<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 Sass mixina:

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

Uzvratni

Za svaku floatvrijednost također postoje varijacije odgovora.

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

Plutanje lijevo na prozorima veličine MD (srednje) ili šire

Plutanje lijevo na prozorima veličine LG (veliki) ili širi

Plutajte ulijevo na prozorima veličine XL (iznimno 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