Source

Kotepa

Toggle flotteurs na élément nionso, na kati ya point de rupture nionso, kosalela ba utilitaires na biso ya flotteur responsive.

Botali ya mozindo

Ba classes oyo ya utilitaire e flotter élément moko na gauche to droite, to e désactiver flottant, selon taille ya port de vue ya lelo na nzela ya propriété CSSfloat . !importantezali na kati mpo na koboya makambo ya spécificité. Yango esalelaka ba points de rupture ya port de vue ndenge moko na système na biso ya grille.

Bakelasi

Toggle flotteur na classe moko:

Flotter na gauche na ba taille nionso ya viewport

Flotter na droite na ba taille nionso ya viewport

Ko flotter te na ba taille nionso ya viewport 
<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>

Ba mixins

To na mixin ya Sass:

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

Koyanola

Bokeseni ya eyano ezali mpe mpo na floatmotuya moko na moko.

Flotter na gauche na ba viewports ya taille SM (moke) to ya large

Flotter na gauche na ba viewports ya taille MD (moyenne) to ya large

Flotter na gauche na ba viewports ya taille LG (ya munene) to ya large

Flotter na gauche na ba viewports ya taille XL (extra-large) to ya large 

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

Tala ba classes nionso ya soutien;

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