Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
in English

Leefofo

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

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 ibudo wiwo ti iwọn LG (tobi) tabi gbooro

Lilefofo bẹrẹ lori awọn oju oju wiwo ti 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 awọn ohun elo API 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,
      )
    ),