Grid: Large Devices Bootstrap 5

ວິນຍານການເອົາ

ອຸປະກອນໃຫຍ່ທີ່ມີການແຍກຕັ້ງ XSmall Small Medium Large Extra Large
XXL ຄວາມເວລາຫນັງ .col- .col-sm- .col-md- .col-lg- .col-xl-
.col-xxl- ວັດສະດຸສະໜາມ <576px >=768px >=992px >=1200px >=1400px

ໃນປີກກ່ອນ ພວກເຮົາໄດ້ສະແດງຄວາມນິຍົມຂອງການແຍກຕັ້ງທີ່ພິຈະລະນາໃຫ້ອຸປະກອນມາດຕະຖານ ແລະ ອຸປະກອນນ້ອຍ. ພວກເຮົາໄດ້ໃຊ້ div (ກົງ) ສອງອັນ ແລະ ແຍກຕັ້ງ 25%/75% ໃນອຸປະກອນນ້ອຍ 50%/50% ໃນອຸປະກອນມາດຕະຖານ:

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

ແຕ່ໃນອຸປະກອນໃຫຍ່ ການອອກແບບແຍກຕັ້ງ 33% / 66% ອາດຈະດີຫນັງ.

ອຸປະກອນໃຫຍ່ຖືກກໍານົດວ່າ ວັດສະດຸສະໜາມຈາກ 992 ຕາມມັດ ຫາ 1199 ຕາມມັດ.

ສຳລັບອຸປະກອນໃຫຍ່ ຂ້ອຍຫນັງໃຊ້ .col-lg-* ປະເພດ:

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

ໃນອຸປະກອນນ້ອຍ ຂ້ອຍຫນັງສະໜອງ -sm- ປະເພດ. ໃນອຸປະກອນມາດຕະຖານ ຂ້ອຍຫນັງສະໜອງ -md- ປະເພດ. ໃນອຸປະກອນໃຫຍ່ ຂ້ອຍຫນັງສະໜອງ -lg- ປະເພດ.

ບົດຢ່າງນີ້ຈະສົ່ງໄປຫາການແຍກຕັ້ງ 25%/75% ໃນອຸປະກອນນ້ອຍ 50%/50% ໃນອຸປະກອນມາດຕະຖານ 33%/66% ໃນອຸປະກອນໃຫຍ່ ກະແຈສັນ ແລະ xxlarge. ໃນອຸປະກອນຂະໜາດນ້ອຍຫນັງ 100%:

ຕົວຢ່າງ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4">
      <p>ສະຖານນິວະຍາມແຫ່ງໂລກ (WWF), ໄດ້ກໍ່ຕັ້ງມື້ທີ 29 ເມສາ 1961, ສັນຍາລະບູລັງຂອງມັນແມ່ນໝາປາວາມ...</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8">
      <p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນຢ່າງເປັນທາງການ, ໄດ້ຖືກເຊີນເຂົ້າປະເທດໂດຍລັດຖະບານຈີນ ເພື່ອການປົກປ້ອງປາວາມຂອງປາວາມລາງ ແລະການກຳລັງສັດປາວາມລາງ...</p>
    </div>
  </div>
</div>

ທ່ານຈະທົດລອງດຽວວຽນ

注意：

ສະຫຼຸບວ່າຈຳນວນທັງໝົດຈະຫຼາຍກວ່າຫຼາຍຫຼືຫຼາຍກວ່າ 12 (ບໍ່ຕ້ອງນຳໃຊ້ທັງໝົດ 12 ອັນທີ່ມີ):

ໃນຕົວຢ່າງດ້ານລຸ່ມ, ພຽງແຕ່ນຳໃຊ້ Large .col-lg-6 ຊະນິດ (ບໍ່ມີ .col-md-* ແລະ/ຫຼື .col-sm-*）。ນີ້ໝາຍຄວາມວ່າ large, xlarge ແລະ xxlarge ອຸປະກອນຈະຂາຍຫຼາຍກວ່າ 50%/50%. ແຕ່ສຳລັບອຸປະກອນ medium, small ແລະ extra small, ຈະກວມຕົວກັນ (100% ການກວມ):

ຕົວຢ່າງ

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6">
      <p>ສະຖານນິວະຍາມແຫ່ງໂລກ (WWF), ໄດ້ກໍ່ຕັ້ງມື້ທີ 29 ເມສາ 1961, ສັນຍາລະບູລັງຂອງມັນແມ່ນໝາປາວາມ...</p>
    </div>
    <div class="col-lg-6">
      <p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນຢ່າງເປັນທາງການ, ໄດ້ຖືກເຊີນເຂົ້າປະເທດໂດຍລັດຖະບານຈີນ ເພື່ອການປົກປ້ອງປາວາມຂອງປາວາມລາງ ແລະການກຳລັງສັດປາວາມລາງ...</p>
    </div>
  </div>
</div>

ທ່ານຈະທົດລອງດຽວວຽນ

ການກວມອັນທີ່ອາດຈັບການ

ໃນ Bootstrap 5, ມີວິທີທີ່ງາຍດາຍສຳລັບການສ້າງອັນທັງໝົດສຳລັບອຸປະກອນ: ພຽງແຕ່ຕໍ່ຕົວຈາກ .col-lg-* ທີ່ຫນຶ່ງທີ່ຫນູນຈາກລະຫັດ ແລະນຳໃຊ້ໃນປະກອບ col ເທົ່ານັ້ນ .col-lg ຊະນິດ. Bootstrap ຈະຮັບຮູ້ຈາກຈຳນວນອັນ ແລະແຕ່ລະອັນຈະມີການກວມດຽວກັນ.

ຖ້າຂະໜາດໜ້າຈໍຕໍ່າກວ່າ 992pxແຕ່ລະອັນ:

<!-- ສອງອັນ: ໃນຫນ້າຫນັງກວ່າ 50% ການກວມ -->
<div class="row">
  <div class="col-lg">1 of 2</div>
  <div class="col-lg">2 of 2</div>
</div>
<!-- ສີ່ອັນ: ໃນຫນ້າຫນັງກວມກັບຫນ້າຫນັງທີ່ຫຼາຍກວ່າ 25% ການກວມ -->
<div class="row">
  <div class="col-lg">1 of 4</div>
  <div class="col-lg">2 of 4</div>
  <div class="col-lg">3 of 4</div>
  <div class="col-lg">4 of 4</div>
</div>

ທ່ານຈະທົດລອງດຽວວຽນ