Pludiņš

Pārslēdziet pludiņus uz jebkura elementa jebkurā pārtraukuma punktā, izmantojot mūsu adaptīvās peldēšanas utilītas.

Šajā lapā

Pārskats

Šīs utilītas klases peld elementu pa kreisi vai pa labi vai atspējo peldēšanu, pamatojoties uz pašreizējo skata porta izmēru, izmantojot CSS floatrekvizītu . !importantir iekļauts, lai izvairītos no specifiskuma problēmām. Tie izmanto tos pašus skatu punkta pārtraukuma punktus kā mūsu režģa sistēma. Lūdzu, ņemiet vērā, ka peldošās utilītas neietekmē elastīgus priekšmetus.

Peldošais sākums visos skata loga izmēros

Peldošais gals visos skata loga izmēros

Nepeldiet uz visiem skata loga izmēriem

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

Atsaucīgs

Katrai floatvērtībai pastāv arī adaptīvas variācijas.

Peldošais sākums skata logos, kuru izmērs ir SM (mazs) vai plašāks

Peldošais sākums skata logos, kuru izmērs ir MD (vidējs) vai plašāks

Peldošais starts skata logos, kuru izmērs ir LG (liels) vai plašāks

Peldošais sākums skata logos, kuru izmērs ir XL (īpaši liels) vai plašāks

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

Šeit ir visas atbalsta klases:

.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 utilītas ir deklarētas mūsu utilītu API scss/_utilities.scss. Uzziniet, kā izmantot utilītu API.

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