Přejít na hlavní obsah Přejít na navigaci v dokumentech
in English

Plovák

Pomocí našich responzivních plovoucích utilit můžete přepínat plovoucí hodnoty na jakémkoli prvku, přes jakýkoli bod přerušení.

Přehled

Tyto třídy nástrojů plovoucí prvek doleva nebo doprava nebo zakázat plovoucí na základě aktuální velikosti výřezu pomocí vlastnosti CSSfloat . !importantje zahrnuto, aby se předešlo problémům se specifičností. Používají stejné zarážky výřezů jako náš systém mřížky. Mějte prosím na paměti, že plovoucí nástroje nemají žádný vliv na flexibilní položky.

Plovoucí začátek na všech velikostech výřezu

Plovoucí konec na všech velikostech výřezu

Neplovou na všechny velikosti výřezu
<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>

Responzivní

floatPro každou hodnotu existují také responzivní variace .

Plovoucí start na výřezech velikosti SM (malé) nebo širší

Plovoucí start na výřezech velikosti MD (střední) nebo širší

Plovoucí start na výřezech velikosti LG (velké) nebo širší

Plovoucí start na výřezech velikosti XL (extra velké) nebo širší

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

Zde jsou všechny třídy 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

Utility API

Plovoucí nástroje jsou deklarovány v našem rozhraní API pro nástroje v scss/_utilities.scss. Naučte se používat rozhraní API utilit.

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