Float

Prebacite float na bilo koji element, preko bilo koje tačke prekida, koristeći naše prilagodljive uslužne programe za plutanje.

Na ovoj stranici

Pregled

Ove uslužne klase pomiču element lijevo ili desno, ili onemogućuju plutanje, na osnovu trenutne veličine okvira za prikaz koristeći CSS floatsvojstvo . !importantuključen je kako bi se izbjegli problemi specifičnosti. Oni koriste iste prelomne tačke prikaza kao naš sistem mreže. Imajte na umu da float uslužni programi nemaju efekta na flex stavke.

Float start na svim veličinama okvira za prikaz

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

Nemojte lebdjeti na svim veličinama prozora

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

Responsive

Odazivne varijacije također postoje za svaku floatvrijednost.

Float start na prozorima veličine SM (mali) ili širi

Float početak na prozorima veličine MD (srednji) ili širi

Float start na prozorima veličine LG (veliki) ili širim

Plutajući početak na prozorima veličine XL (ekstra-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>

Evo svih klasa 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

Utilities API

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

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