Source

မျှောပါ။

ကျွန်ုပ်တို့၏တုံ့ပြန်မှုရှိသော float utilities များကိုအသုံးပြု၍ မည်သည့်ဒြပ်စင်ပေါ်တွင်မဆို float ခလုတ်ကိုနှိပ်ပါ။

ခြုံငုံသုံးသပ်ချက်

ဤအသုံးအဆောင်အတန်းများသည် CSS floatပိုင်ဆိုင်မှု ကို အသုံးပြု၍ လက်ရှိမြင်ကွင်းပို့အရွယ်အစားအပေါ်အခြေခံ၍ အစိတ်အပိုင်းတစ်ခုအား ဘယ် သို့မဟုတ် ညာသို့ ရွေ့လျားစေသည် သို့မဟုတ် လွှင့်တင်ခြင်းကို ပိတ်ပါ ။ !importantသီးခြားပြဿနာများကိုရှောင်ရှားရန်ပါဝင်သည်။ ၎င်းတို့သည် ကျွန်ုပ်တို့၏ grid စနစ်ကဲ့သို့ တူညီသော viewport breakpoints များကို အသုံးပြုပါသည်။ float utilities များသည် flex items များအပေါ် သက်ရောက်မှုမရှိသည်ကို သတိပြုပါ။

သင်တန်းများ

အတန်းတစ်ခုဖြင့် မျှော့တစ်ခုကို ပြောင်းပါ-

Viewport အရွယ်အစားအားလုံးတွင် ဘယ်ဘက်တွင် မျှောပါ။

viewport အရွယ်အစားအားလုံးတွင် ညာဘက်သို့ မျှောပါ။

viewport အရွယ်အစားအားလုံးတွင် မျှောမနေပါနှင့်
<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

သို့မဟုတ် Sass mixin မှ

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

တုံ့ပြန်မှု

floatတန်ဖိုး တစ်ခုစီအတွက် တုံ့ပြန်မှုကွဲပြားမှုများလည်း ရှိပါသည် ။

အရွယ်အစား SM (သေးငယ်သည်) သို့မဟုတ် ပိုကျယ်သော viewports ပေါ်တွင် ဘယ်ဘက်သို့ မျှောပါ။

အရွယ်အစား MD (အလယ်အလတ်) သို့မဟုတ် ပိုကျယ်သော viewports ပေါ်တွင် ဘယ်ဘက်သို့ မျှောပါ။

အရွယ်အစား LG (ကြီး) သို့မဟုတ် ပိုကျယ်သော viewport များပေါ်တွင် ဝဲနေပါ။

Viewports အရွယ်အစား XL (ပိုကြီး) သို့မဟုတ် ပိုကျယ်သော viewports ပေါ်တွင် ဘယ်ဘက်တွင် မျှောပါ။

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

ဤတွင် ထောက်ပံ့ရေး အတန်းများအားလုံး

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