Yawo

Juya masu yawo a kan kowane nau'i, ƙetare kowane wuri mai karye, ta amfani da kayan aikin mu masu iyo.

A wannan shafi

Dubawa

Waɗannan azuzuwan masu amfani suna yawo da wani kashi zuwa hagu ko dama, ko kuma musaki mai iyo, dangane da girman kallon yanzu ta amfani da kadarorin CSSfloat . !importantan haɗa shi don guje wa takamaiman batutuwa. Waɗannan suna amfani da wuraren tsinkewa iri ɗaya kamar tsarin grid ɗin mu. Da fatan za a sani abubuwan amfani da ruwa ba su da tasiri akan abubuwa masu sassauƙa.

Fara taso kan ruwa akan duk girman wurin kallo

Ƙarshen yawo a kan duk girman kallon kallo

Kar a yi iyo akan duk girman wurin kallo

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

Mai amsawa

Hakanan akwai bambancin amsa ga kowace floatƙima.

Fara taso kan ruwa mai girman SM (kananan) ko mafi girma

Fara taso kan ruwa mai girman MD (matsakaici) ko mafi fadi

Fara tashi a kan madaidaitan wuraren kallo masu girman LG (manya) ko mafi girma

Fara taso kan ruwa mai girman XL (mafi girma) ko mafi fadi

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

Ga duk azuzuwan tallafi:

.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

API ɗin Utilities

Ana ayyana abubuwan amfani da ruwa a cikin API ɗin mu a cikin scss/_utilities.scss. Koyi yadda ake amfani da API ɗin abubuwan amfani.

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