Bootstrap 4 Grid Stacked-to-horizontal
Bootstrap 4 Grid ဥပမာ- Stacked-to-horizontal
ကျွန်ုပ်တို့သည် ပိုကြီးသောစက်ပစ္စည်းများတွင် အလျားလိုက်မဖြစ်မီ အပိုကိရိယာငယ်များပေါ်တွင် အစီအစဥ်ချထားသည့် အခြေခံဂရစ်စနစ်တစ်ခုကို ဖန်တီးပါမည်။
အောက်ဖော်ပြပါ ဥပမာသည် ရိုးရှင်းသော "စတန်းမှ-အလျားလိုက်" ကော်လံနှစ်ခု အပြင်အဆင်ကို ပြသထားပြီး ဆိုလိုသည်မှာ ၎င်းသည် အပိုသေးငယ်သည့်စခရင်များမှလွဲ၍ ဖန်သားပြင်အားလုံးတွင် 50%/50% ကွဲသွားမည်ဖြစ်ပြီး၊ ၎င်းသည် အလိုအလျောက် (100%) စီစုလိမ့်မည်-
ဥပမာ- အထပ်လိုက်-အလျားလိုက်
<div class="container">
<div class="row">
<div class="col-sm-6 bg-success">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6 bg-warning">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
အကြံပြုချက်- အတန်းများရှိ နံပါတ်များ .col-sm-*သည် div ကော်လံမည်မျှကို ချဲ့သင့်သည် (12 အနက်မှ) ကိုညွှန်ပြသည်။ ထို့ကြောင့်၊ .col-sm-1ကော်လံ 1 ခု၊ .col-sm-4အပိုင်း 4 ကော်လံ၊
.col-sm-6အပိုင်း 6 ကော်လံ စသည်ဖြင့်။
မှတ်ချက်-
ပေါင်းလဒ်သည် 12 သို့မဟုတ် ထို့ထက်နည်းအောင် ပေါင်းထည့်ကြောင်း သေချာပါစေ။ (ရနိုင်သော ကော်လံ 12 ခုလုံးကို အသုံးပြုရန် မလိုအပ်ပါ)။
အကြံပြုချက်- အတန်းအစားသို့ ပြောင်းလဲခြင်းဖြင့် ပုံသေအ နံ ကိုမဆို အကျယ်အဝန်းအဖြစ်သို့ ပြောင်းလဲနိုင်သည် ။.container.container-fluid
ဥပမာ- အရည်ပုံး
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
အလိုအလျောက် အပြင်အဆင် ကော်လံများ
Bootstrap 4 တွင်၊ စက်အားလုံးအတွက် တူညီသော width ကော်လံများကို ဖန်တီးရန် လွယ်ကူသောနည်းလမ်းတစ်ခု ရှိသည်- နံပါတ်ကို ဖယ်ရှားလိုက်ရုံ ဖြင့် သတ်မှတ်ထားသော
col ဒြပ်စင် အရေအတွက်တွင် အတန်းကို အသုံးပြု ပါ ။ Bootstrap သည် ကော်လံမည်မျှရှိသည်ကို သိရှိမည်ဖြစ်ပြီး ကော်လံတစ်ခုစီသည် တူညီသောအကျယ်ကို ရရှိမည်ဖြစ်သည်။ အရွယ်အစား အတန်းများသည် ကော်လံများကို မည်သည့်အချိန်တွင် တုံ့ပြန်သင့်သည်ကို ဆုံးဖြတ်သည် -.col-size-*.col-size
<!-- Two columns: 50% width on all screens, except for extra small (100%
width) -->
<div class="row">
<div class="col-sm">1 of
2</div>
<div class="col-sm">2 of 2</div>
</div>
<!-- Four
columns: 25% width on all screens, except for extra small (100% width)-->
<div class="row">
<div class="col-sm">1 of 4</div>
<div class="col-sm">2 of 4</div>
<div class="col-sm">3
of 4</div>
<div class="col-sm">4 of 4</div>
</div>