Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
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.

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

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