Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Plūdė

Perjunkite plūdes ant bet kurio elemento, bet kuriame pertraukos taške, naudodami mūsų reaguojančias plūduriuojančias priemones.

Šiame puslapyje

Apžvalga

Šios naudingumo klasės slankioja elementą į kairę arba dešinę arba išjungia slankųjį, atsižvelgiant į dabartinį peržiūros srities dydį, naudojant CSS floatypatybę . !importantįtraukta, kad būtų išvengta specifiškumo problemų. Juose naudojami tie patys peržiūros taškai, kaip ir mūsų tinklelio sistemoje. Atminkite, kad plaukiojančios priemonės neturi įtakos lankstiems daiktams.

Slankioji pradžia visų dydžių peržiūros srityje

Plūdinis galas visų dydžių peržiūros srityje

Neplaukite visų dydžių peržiūros srityje
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>

Atsakingas

floatKiekvienai vertei taip pat yra reaguojančių variantų .

Slankioji pradžia SM (mažos) arba platesnėse peržiūros srityse

Slankioji pradžia MD (vidutinio) arba platesnėse peržiūros srityse

Slankioji pradžia LG (didelės) arba platesnėse peržiūros srityse

Slankioji pradžia XL (ypač didelės) arba platesnėse peržiūros srityse

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>

Čia yra visos palaikymo klasės:

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

Plūduriuojančios komunalinės paslaugos nurodytos mūsų paslaugų API scss/_utilities.scss. Sužinokite, kaip naudoti paslaugų API.

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