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

Plavák

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

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é prerušovacie body výrezu ako náš mriežkový systém. Uvedomte si prosím, ž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
<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

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