Float

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

Pa peji ino

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 mhedzisiro pazvinhu zvinochinjika.

Float tanga pane ese ekuona saizi

Float magumo pane ese ekutarisa saizi

Usayangarara pamasaizi ese ekuona

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

Anoteerera

Misiyano inopindura iripo kune imwe neimwe floatkukosha.

Yayangarara tanga pazviteshi zvekuona saizi SM (diki) kana yakafara

Yayangarara tanga pane yekuona zviteshi saizi MD (yepakati) kana yakafara

Yayangarara tanga pazviteshi zvematanho saizi LG (huru) kana yakafara

Yayangarara tanga pazviteshi zvekuona saizi XL (yakawedzera-yakakura) kana yakafara

<div class="float-sm-start">Float start on viewports sized SM (small) or wider</div><br>
<div class="float-md-start">Float start on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-start">Float start on viewports sized LG (large) or wider</div><br>
<div class="float-xl-start">Float start on viewports sized XL (extra-large) or wider</div><br>

Heano ese makirasi ekutsigira:

.float-start
.float-end
.float-none
.float-sm-start
.float-sm-end
.float-sm-none
.float-md-start
.float-md-end
.float-md-none
.float-lg-start
.float-lg-end
.float-lg-none
.float-xl-start
.float-xl-end
.float-xl-none
.float-xxl-start
.float-xxl-end
.float-xxl-none

Sass

Purogiramu inonzi Utilities

Float utilities inoziviswa mune yedu zvishandiso API mu scss/_utilities.scss. Dzidza mashandisiro ezvishandiso API.

    "float": (
      responsive: true,
      property: float,
      values: (
        start: left,
        end: right,
        none: none,
      )
    ),