Shandura zvinoyangarara pane chero chinhu, pane chero nzvimbo yekutyora, uchishandisa yedu inoteerera inoyangarara zviya.

Overview

Aya makirasi ekushandisa anoyangarara chinhu kuruboshwe kana kurudyi, kana kudzima inoyangarara, zvichibva pane yazvino yekuona saizi uchishandisa CSS floatchivakwa . !importantinosanganisirwa kudzivirira nyaya dzakananga. Aya anoshandisa iwo akafanana ekuona nzvimbo dzekutyora senge grid system yedu. Ndapota ziva kuti float utilities haina mhedzisiro pazvinhu zvinochinjika.

Makirasi

Shandura chinoyangarara nekirasi:

Fonera kuruboshwe pamasaizi ese enzvimbo yekuona

Fonera ipapo pahukuru hwese hwekuona

Usayangarara pamasaizi ese ekuona
<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>

Mixins

Kana neSass mixin:

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

Anoteerera

Misiyano inopindura iripo kune imwe neimwe floatkukosha.

Yayangarara kuruboshwe pazviteshi zvezviteshi zvakakura SM (zvidiki) kana kureba

Yayangarara kuruboshwe pane yekuona zviteshi saizi MD (yepakati) kana kureba

Yayangarara kuruboshwe pazviteshi zvekuona saizi LG (yakakura) kana yakafara

Yayangarara kuruboshwe pazviteshi zvekutarisa zvakakura XL (yakawedzera-yakakura) kana yakafara

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

Heano ese makirasi ekutsigira;

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