Bootstrap 5 ကွန့်: အဆင့်

အဆိုးတူသော အသင်းသွား အစီအစဉ်

XSmall Small Medium Large Extra Large XXL
အကြောင်းအရာ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
အကြီးအားဖြင့် <576px >=576px >=768px >=992px >=1200px >=1400px

အရာဝတ္တိကြီး ၁ခုကို ပြသခဲ့တာပါ။ အသင်းသွားအသင်းသွားများအတွက် အကြောင်းအရာမျိုးအစားကို အသုံးပြုခဲ့တာပါ။ နှစ်ခုသော div (အစိတ်) ကို အသုံးပြု၍ ၂၅% / ၇၅% ခွဲခြားခြင်းကို ပြသခဲ့တာပါ

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

သို့သော်လည်း အဆိုးတူသော အသင်းသွားများတွင် ၅၀% / ၅၀% ခွဲခြားခြင်းအစီအစဉ်များ အကောင်းမွန်သည်

အဆိုးတူသော အသင်းသွားများ ကို အကြီးအားဖြင့် ကြည့်ရမည်၇၆၈ ပုံအချိန်မှ ၉၉၁ ပုံအချိန်。

အဆိုးတူသော အသင်းသွားများအတွက်，သင်သုံးပါ .col-md-* အကြောင်းအရာ

<div class="col-sm-3 col-md-6">....</div>
<div class="col-sm-9 col-md-6">....</div>

အသင်းသွားအသင်းသွားများတွင် သင်သုံးပါ -sm- အကြောင်းအရာအမျိုးအစား။ အဆိုးတူသော အသင်းသွားများတွင်，သင်သုံးပါ -md- အကြောင်းအရာအမျိုးအစား。

အောက်ပါအရာမှာ သန်းခြုံရာ အသင်းသွားသည် သန်းခြုံရာ ၂၅% / ၇၅% ခွဲခြားခြင်းနှင့် အဆိုးတူသော (နှင့် အကြီးတူသော၊ အကြီးကျယ်သော၊ အကြီးကျယ်သော) အသင်းသွားများ ၅၀% / ၅၀% ခွဲခြားခြင်းဖြစ်သည်။ အသန်းခြုံရာ အသင်းသွားမှာ အတိုင်းအတာ ၁၀၀% စုပေါင်းသည်။

အမှတ်အသား

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6">
      <p>World Wide Fund for Nature (WWF)，1961 ခုနှစ် ဧပြီ 29 ရက်တွင် ပေါ်ပေါက်ခဲ့သည်။ သူတို့၏ လိပ်သား သည် ကျွန်းသူ့ ဖြစ်သည်။</p>
    </div>
    

      <p>1980 ခုနှစ်တွင်，WWF သည် တရုတ်နိုင်ငံ အစိုးရ ကြိုက်ချင်သည့် အခြေချက်ဖြင့် တရုတ်နိုင်ငံ သို့ ပါဝင်လာခဲ့သည်။ ဒါဟာ ကျွန်းသူ့ မွေးမြူသော သဘာဝတွင် ကျွန်းသူ့ အခြေစိုက်ခြင်း ကို ကာကွယ်ရန် လုပ်ကိုင်ခဲ့သည် ...</p>
    </div>
  </div>
</div>

ကိုယ်တိုင် ကြိုးစားကြပါ

注意：确保总和等于或小于 12（不需要使用所有 12 个可用列）：

仅使用 Medium

在下例中，我们只指定了 .col-md-6 类（没有 .col-sm-*）。这意味着中型、大型、超大型和 XXL 设备将拆分 50% / 50% - 因为该类会扩展。但是，对于小型和超小型设备，将垂直堆叠（100% 宽度）：

အမှတ်အသား

<div class="row">
  <div class="col-md-6">
    <p>World Wide Fund for Nature (WWF)，1961 ခုနှစ် ဧပြီ 29 ရက်တွင် ပေါ်ပေါက်ခဲ့သည်။ သူတို့၏ လိပ်သား သည် ကျွန်းသူ့ ဖြစ်သည်။</p>
  </div>
  <div class="col-md-6">
    <p>1980 ခုနှစ်တွင်，WWF သည် တရုတ်နိုင်ငံ အစိုးရ ကြိုက်ချင်သည့် အခြေချက်ဖြင့် တရုတ်နိုင်ငံ သို့ ပါဝင်လာခဲ့သည်။ ဒါဟာ ကျွန်းသူ့ မွေးမြူသော သဘာဝတွင် ကျွန်းသူ့ အခြေစိုက်ခြင်း ကို ကာကွယ်ရန် လုပ်ကိုင်ခဲ့သည် ...</p>
  </div>
</div>

ကိုယ်တိုင် ကြိုးစားကြပါ

အဆိုပါ နည်းလမ်း အရှိန်

Bootstrap 5 တွင် တစ်လုံးတည်း အရှိန် ပြုလုပ်နိုင်သော နည်းလမ်း တစ်ခု ရှိသည်။ သာမန် ကုန်သွယ်စရာ ကို .col-md-* နှင့် အရှိန် ကို ပြန်လည်ပြောင်းလဲကြောင်း အဆိုပါ အကြောင်းအရာ ကို လက်ခံသည်။ .col-md အကြောင်းအရာ ကို လက်ခံသော Bootstrap သည် အဆောက်အအုံ အချို့ အား ကြားချုပ်သည် နှင့် အဆောက်အအုံ များသည် အတူတူ အရှိန် ကို ရရှိသည်။

အခြေအနေ အဆာပြား အရှိန်အခြေအနေ 768px ထက် သေးတစ်လုံးတည်း လုံး အဆောက်အအုံ ကြောင်း

<!-- နှစ်လုံး ကိုယ်တိုင် ကို အရှိန် 50% ဖြင့် ပြည့်ပြည့်ပေါ်တွင် ဖြစ်ပါ -->
<div class="row">
  <div class="col-md">1 of 2</div>
  <div class="col-md">2 of 2</div>
</div>
<!-- လေးလုံး ကိုယ်တိုင် ကို အရှိန် 25% ဖြင့် ပြည့်ပြည့်ပေါ်တွင် ဖြစ်ပါ -->
<div class="row">
  <div class="col-md">1 of 4</div>
  <div class="col-md">2 of 4</div>
  <div class="col-md">3 of 4</div>
  <div class="col-md">4 of 4</div>
</div>

ကိုယ်တိုင် ကြိုးစားကြပါ

နောက်ပိုင်းစား ကော်မတီတိုက် ကို အထူး ကုန်သွယ်စရာ ပေါ်တွင် မျိုးပေါင်း ကြောင်း ကို ပြသည်။