Source

Kuelea

Geuza kuelea kwenye kipengele chochote, kwenye sehemu yoyote ya kukatiza, kwa kutumia huduma zetu za kuelea zinazojibu.

Muhtasari

Madarasa haya ya matumizi huelea kipengee kushoto au kulia, au kuzima kipengele cha kuelea, kulingana na ukubwa wa sasa wa kituo cha kutazama kwa kutumia kipengele cha CSSfloat . !importantimejumuishwa ili kuepuka masuala maalum. Hizi hutumia viingilio sawa vya sehemu ya kutazama kama mfumo wetu wa gridi ya taifa. Tafadhali fahamu kuwa huduma za kuelea hazina athari kwa vipengee vinavyobadilikabadilika.

Madarasa

Geuza kuelea na darasa:

Elekea kushoto kwa saizi zote za kituo cha kutazama

Elea kulia kwenye saizi zote za kituo cha kutazama

Usielee kwenye saizi zote za kituo cha kutazama
<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>

Mchanganyiko

Au kwa mchanganyiko wa Sass:

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

Msikivu

Tofauti za kuitikia pia zipo kwa kila floatthamani.

Elekea kushoto kwenye vituo vya kutazama vya ukubwa wa SM (ndogo) au pana

Elekea kushoto kwenye MD ya ukubwa wa vituo vya kutazama (kati) au pana

Elea kushoto kwenye vituo vya kutazama vya ukubwa wa LG (kubwa) au pana

Elea kushoto kwenye vituo vya kutazama vya ukubwa wa XL (kubwa zaidi) au kwa upana zaidi

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

Hapa kuna madarasa yote ya usaidizi;

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