Source

Flyta

Växla flytningar på vilket element, över vilken brytpunkt som helst, med hjälp av våra responsiva flytverktyg.

Översikt

Dessa verktygsklasser flyter ett element till vänster eller höger, eller inaktiverar flytande, baserat på den aktuella visningsportstorleken med CSS- floategenskapen . !importantingår för att undvika specificitetsproblem. Dessa använder samma viewport-brytpunkter som vårt rutsystem. Var medveten om att flytverktyg inte påverkar flexartiklar.

Klasser

Växla ett flyt med en klass:

Flyt vänster på alla visningsportstorlekar

Flyt rätt på alla visningsportstorlekar

Flyt inte på alla visningsportstorlekar 
<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

Eller av Sass mixin:

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

Mottaglig

Responsiva variationer finns också för varje floatvärde.

Flyt kvar på viewports storlek SM (liten) eller bredare

Flyt vänster på viewports storlek MD (medium) eller bredare

Flyt kvar på visningsportar i storlek LG (stor) eller bredare

Flyt kvar på viewports storlek XL (extra-large) eller bredare 

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

Här är alla stödklasser;

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