Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

Plavák

Prepínajte plávajúce objekty na ľubovoľnom prvku, cez akýkoľvek bod prerušenia, pomocou našich responzívnych plávajúcich nástrojov.

Na tejto stránke

Prehľad

Tieto pomocné triedy umiestňujú prvok doľava alebo doprava alebo zakážu plávanie na základe aktuálnej veľkosti výrezu pomocou vlastnosti CSSfloat . !importantje zahrnutá, aby sa predišlo problémom so špecifickosťou. Používajú rovnaké body prerušenia zobrazenia ako náš mriežkový systém. Prosím, uvedomte si, že plávajúce nástroje nemajú žiadny vplyv na flexibilné položky.

Plávajúci štart na všetkých veľkostiach výrezu

Pohyblivý koniec na všetkých veľkostiach výrezu

Neplávajte na všetkých veľkostiach výrezu
html
<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>

Responzívne

floatPre každú hodnotu existujú aj responzívne variácie .

Pohyblivý štart na výrezoch veľkosti SM (malé) alebo širšie

Pohyblivý štart na výrezoch veľkosti MD (stredné) alebo širšie

Plávajúci štart na výrezoch veľkosti LG (veľké) alebo širšie

Plávajúci štart na výrezoch veľkosti XL (extra veľké) alebo širšie

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

Tu sú všetky triedy podpory:

  • .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 utility sú deklarované v našom utilities API v scss/_utilities.scss. Zistite, ako používať pomocné rozhranie API.

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