Plutati

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

Na ovoj stranici

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 učinka na flex stavke.

Plutajući početak na svim veličinama okvira za prikaz

Plutajući kraj na svim veličinama prozora za prikaz

Nemojte lebdjeti na svim veličinama okvira za prikaz

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

Uzvratni

Za svaku floatvrijednost također postoje varijacije odgovora.

Plutajući početak na prozorima veličine SM (mali) ili širi

Plutajući početak na prozorima veličine MD (srednje) ili šire

Plutajući početak na prozorima veličine LG (veliki) ili širi

Plutajući početak na prozorima veličine XL (iznimno veliki) ili širi

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

Ovdje su sve klase podrške:

.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

API za pomoćne programe

Float pomoćni programi deklarirani su u našem API-ju pomoćnih programa u scss/_utilities.scss. Naučite kako koristiti API uslužnih programa.

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