Source

Float

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

Overview

Aya makirasi ekushandisa anoyangarara chinhu kuruboshwe kana kurudyi, kana kudzima inoyangarara, zvichibva pane yazvino yekuona saizi uchishandisa CSS floatchivakwa . !importantinosanganisirwa kudzivirira nyaya dzakanangana. Aya anoshandisa iwo akafanana ekuona mabreakpoint seyedu grid system. Ndapota ziva kuti float utilities haina kukanganisa pane flex zvinhu.

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 zvekuona saizi SM (diki) kana kureba

Yayangarara kuruboshwe pazviteshi zvekuona 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