Leefofo

Yipada leefofo lori eyikeyi eroja, kọja eyikeyi breakpoint, lilo wa idahun leefofo igbesi.

Lori iwe yi

Akopọ

Awọn kilasi ohun elo wọnyi leefofo loju omi si apa osi tabi sọtun, tabi mu lilefoofo duro, da lori iwọn wiwo lọwọlọwọ nipa lilo ohun-ini CSSfloat . !importantwa ninu lati yago fun awọn ọran pataki. Iwọnyi lo awọn aaye fifọ oju wiwo kanna gẹgẹbi eto akoj wa. Jọwọ ṣe akiyesi awọn ohun elo leefofo loju omi ko ni ipa lori awọn ohun kan rọ.

Leefofo bẹrẹ lori gbogbo awọn titobi wiwo

Leefofo opin lori gbogbo awọn titobi wiwo

Ma ṣe leefofo lori gbogbo awọn titobi wiwo

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

Idahun

Awọn iyatọ idahun tun wa fun floatiye kọọkan.

Lilefofo bẹrẹ lori awọn iwo oju wiwo SM (kekere) tabi gbooro

Lilefofo bẹrẹ lori awọn ibudo wiwo iwọn MD (alabọde) tabi gbooro

Lilefofo bẹrẹ lori awọn iwo oju iwọn LG (tobi) tabi gbooro

Lilefofo bẹrẹ lori awọn iwo oju oju iwọn XL (afikun-tobi) tabi gbooro

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

Eyi ni gbogbo awọn kilasi atilẹyin:

.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 Awọn ohun elo

Awọn ohun elo leefofo ni a kede ni API awọn ohun elo wa ni scss/_utilities.scss. Kọ ẹkọ bi o ṣe le lo API awọn ohun elo.

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