Source

Pludiņš

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

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.

Klases

Pārslēgt pludiņu ar klasi:

Peldēt pa kreisi visos skata loga izmēros

Peldiet pa labi uz visiem skata loga izmēriem

Nepeldiet uz visiem skata loga izmēriem 
<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>

Maisījumi

Vai arī Sass mixin:

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

Atsaucīgs

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

Peldiet pa kreisi skata logos, kuru izmērs ir SM (mazs) vai plašāks

Peldiet pa kreisi skata logos, kuru izmērs ir MD (vidējs) vai plašāks

Peldiet pa kreisi uz skata logiem, kuru izmērs ir LG (liels) vai plašāks

Peldiet pa kreisi uz XL izmēra (īpaši lieliem) vai platākiem skata logiem 

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

Šeit ir visas atbalsta nodarbības;

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