Source

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ę . !importantyra įtrauktas, 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.

Klasės

Perjungti plūdę su klase:

Slankioji kairėn visų dydžių peržiūros srityje

Plaukite tiesiai ant visų dydžių peržiūros srities

Neplaukite ant visų dydžių peržiūros srities 
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Mišiniai

Arba Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Atsakingas

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

Paslinkite į kairę SM (mažų) arba platesnių peržiūros zonų

Paslinkite į kairę MD (vidutinio) arba platesnėse peržiūros srityse

Laikykite kairėje LG (didelės) arba platesnėse peržiūros srityse

Paslinkite į kairę ant XL dydžio (ypač didelės) arba platesnės peržiūros langų 

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Čia yra visos palaikymo klasės;

  • .float-left
  • .float-right
  • .float-none
  • .float-sm-left
  • .float-sm-right
  • .float-sm-none
  • .float-md-left
  • .float-md-right
  • .float-md-none
  • .float-lg-left
  • .float-lg-right
  • .float-lg-none
  • .float-xl-left
  • .float-xl-right
  • .float-xl-none