Source

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.

Awọn kilasi

Yipada leefofo loju omi pẹlu kilasi kan:

Leefofo osi lori gbogbo awọn iwọn wiwo wiwo

Leefofo ọtun lori gbogbo awọn titobi wiwo

Ma ṣe leefofo lori gbogbo awọn titobi wiwo 
<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

Tabi nipasẹ Sass mixin:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

Idahun

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

Leefofo osi lori awọn ibudo wiwo iwọn SM (kekere) tabi gbooro

Leefofo osi lori awọn ibudo wiwo iwọn MD (alabọde) tabi gbooro

Leefofo osi lori awọn ibudo wiwo ti iwọn LG (tobi) tabi gbooro

Leefofo osi lori awọn ibudo wiwo ti iwọn XL (afikun-tobi) tabi gbooro 

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

Eyi ni gbogbo awọn kilasi atilẹyin;

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