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. Observera att flytande verktyg inte har någon effekt på flexartiklar.

Klasser

Växla ett flyt med en klass:

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

<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