အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
Check
in English

မျှောပါ။

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

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

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

Float ကို viewport အရွယ်အစားအားလုံးတွင် စတင်သည်။

viewport အရွယ်အစားအားလုံးတွင် Float end

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

တုံ့ပြန်မှု

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

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

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

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

Float ကို viewports အရွယ်အစား XL (extra-large) သို့မဟုတ် ပိုကျယ်သော viewports တွင် စတင်သည်။

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

ဤသည်မှာ ပံ့ပိုးမှုအတန်းများအားလုံး ဖြစ်သည်-

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

ဆူး

အသုံးအဆောင်များ API

Float utilities များကို ကျွန်ုပ်တို့၏ utilities API တွင် ကြေငြာ scss/_utilities.scssထားသည်။ utilities API ကို အသုံးပြုနည်းကို လေ့လာပါ။

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