Hoppa till huvudinnehållet Hoppa till dokumentnavigering

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

På den här sidan

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

Flytstart på alla visningsportstorlekar

Flytände på alla visningsportstorlekar

Flyt inte på alla visningsportstorlekar
<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mottaglig

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

Flytstart på visningsportar i storlek SM (liten) eller bredare

Flytande start på visningsportar i storleken MD (medium) eller bredare

Flytande start på visningsportar i storleken LG (stor) eller bredare

Flytstart på visningsportar i storlek XL (extra-large) eller bredare

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

Här är alla supportklasser:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none

Sass

Utilities API

Flytande verktyg deklareras i vårt utilities API i scss/_utilities.scss. Lär dig hur du använder utilities API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),