Bootstrap 5 Grid: Small Devices

ឧទាហរណ៍បញ្ញត្តិបន្ទះតូច

XSmall Small Medium Large Extra Large XXL
ផ្តុំប្រភេទ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ទីតាំងអេក្រង់ <576px >=576px >=768px >=992px >=1200px >=1400px

ជាលក្ខណៈការរៀបចំក្រាហ្វិកក្នុងរូបភាពធម្មតា សំរាប់ឧបករណ៍តូច，យើងចង់បែកផ្តាច់បន្ទះ 25% / 75%。

ឧបករណ៍តូចត្រូវបានចាត់ទុកថាជា ទីតាំងប្រព័ន្ធពី 576 ភីឃស៊ីល ទៅ 767 ភីឃស៊ីល。

សំរាប់ឧបករណ៍តូច，យើងនឹងប្រើ .col-sm-* ប្រភេទ。

យើងនឹងបន្ថែមប្រភេទទៅក្នុងបន្ទះពីរ:

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

ឧទាហរណ៍ខាងក្រោមនឹងបង្កើត 25% / 75% ការបែកផ្តាច់ នៅលើឧបករណ៍តូច (និងកម្រិតកម្រិតមធ្យម、ធំ、ក្រោមធំ និងធំខ្លាំង)។ នៅលើឧបករណ៍តូចខ្លាំង，វានឹងចង្កូតជាស្រុក (100%):

ឧទាហរណ៍

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-sm-9 bg-dark">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, inanyayahan ng pamahalaan ng Tsina para magsagawa ng proteksyon sa panda at ang kanilang tirikang lugar...</p>
    </div>
  </div>
</div>

Subukan Ngayon

ការព្រមាន：ធានាថាចំនួនសរុបគឺចំនួនតិចជាងរឺស្មើ 12 (មិនចាំបាច់ប្រើច្រកខ្ទង់ទាំង 12 ខ្ទង់ដែលអាចប្រើបាន):

សំរាប់ 33.3% / 66.6% ការបែកផ្តាច់，អ្នកគួរប្រើ .col-sm-4 និង .col-sm-8（សំរាប់ 50% / 50% ការបែកផ្តាច់，អ្នកគួរប្រើ .col-sm-6 និង .col-sm-6):

ឧទាហរណ៍

<!-- 33.3/66.6% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-sm-8 bg-dark">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, inanyayahan ng pamahalaan ng Tsina para magsagawa ng proteksyon sa panda at ang kanilang tirikang lugar...</p>
    </div>
  </div>
</div>
<!-- 50%/50% split: -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>World Wide Fund for Nature (WWF), itinatag noong Abril 29, 1961, ang logo nito ay isang panda...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>1940 taon, ang WWF ay opisyal na dumating sa Tsina, inanyayahan ng pamahalaan ng Tsina para magsagawa ng proteksyon sa panda at ang kanilang tirikang lugar...</p>
    </div>
  </div>
</div>

Subukan Ngayon

ayos ng lapad ng kolum

Sa Bootstrap 5, mayroong simpleng paraan upang gumawa ng kolum na parehong lapad para sa lahat ng aparato: lamang kailangan munang makuha mula sa .col-sm-* malibang ang numero sa loob ng kolum, at ilagay lamang sa ang kolum na colsa paggamit .col-sm Ang Bootstrap ay makakakilala kung gaano karami ang kolum, at bawat kolum ay makakakuha ng parehong lapad.

Kung ang laki ng screenBabang 576px, ang kolum ay magiging horizontal na napapalit:

<!-- Dalawang kolum: 50% ng lapad ng lahat ng screen, maliban sa maliit na aparato (100% lapad) -->
<div class="row">
  <div class="col-sm">1 ng 2</div>
  <div class="col-sm">2 ng 2</div>
</div>
<!-- Apat na kolum: 25% ng lapad ng lahat ng screen, maliban sa maliit na aparato (100% lapad) -->
<div class="row">
  <div class="col-sm">1 ng 4</div>
  <div class="col-sm">2 ng 4</div>
  <div class="col-sm">3 ng 4</div>
  <div class="col-sm">4 ng 4</div>
</div>

Subukan Ngayon

Ang susunod na kabanata ay ipapakita kung paano magdagdag ng iba't ibang porsiyento ng paghahati para sa medium na aparato.