Bootstrap 5 Grid: XXL

XXL ອຸປະກອນການກະຈາຍຂອງລະບົບ Bootstrap

XSmall Small Medium Large Extra Large XXL
ວິນິທະຍຸແຕ່ງຫົວ .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
ວັດຖຸລະບາຍລະວັງສະແດງ <576px >=576px >=768px >=992px >=1200px >=1400px

XXL ອຸປະກອນຖືກຈັດໃຫ້ມີ 1400 ພາກຕາລະສານຫຼາຍກວ່າວັດຖຸລະບາຍລະວັງສະແດງ.

ບົດສະຫຼຸບ 50%/50% ຈະຖືກກະຈາຍໃຫ້ໃນອຸປະກອນຂະໜາດກາງ ຂະໜາດໃຫຍ່ ແລະ ຂະໜາດຄັບຄາບ ພ້ອມກັບ XXL ອຸປະກອນທີ່ກະຈາຍ 25%/75% ໃນອຸປະກອນຂະໜາດນ້ອຍ ແລະ ອຸປະກອນຂະໜາດນ້ອຍຫຼາຍ ຈະມີການກະຈາຍອອກມາເອົາ (100%):

ຕົວຢ່າງ

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-xxl-3">
      <p>World Wide Fund for Nature (WWF), ຕັ້ງຂຶ້ນໃນວັນທີ 29 ເມສາ 1961, ສັນຍາລະບຽບຂອງພວກເຂົາແມ່ນໝາປະຈຳ ...</p>
    </div>
    <div class="col-md-6 col-xxl-9">
      <p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນ, ໂດຍການເຊີນຮັບເອົາຈາກລັດຖະບານຈີນ ເພື່ອດໍາເນີນການປົກປ້ອງທີ່ປະກອບມີການປົກປ້ອງພວກສັນຍາວັນ ...</p>
    </div>
  </div>
</div>

ສອບສວນເອງ

ຄໍາເຕືອນ:ກະຕຸ້ນວ່າຈຳນວນຂອງພວກເຂົາຈະຈະຢູ່ຢ່າງສະຫລາກ.

ພຽງແຕ່ XXL

ໃນຕົວຢ່າງດັ່ງກ່າວນີ້, ພວກເຮົາພຽງແຕ່ມີ .col-xxl-6 ປະເພດ (ບໍ່ .col-md-* ແລະ / ຫລື .col-sm-*）。ນີ້ຈະກ່າວວ່າ ອຸປະກອນ xxlarge ຈະຫັນແຕ່ລະສ່ວນ 50%/50%. ແຕ່ສໍາລັບອຸປະກອນ ultra-wide, wide, medium, small ແລະ extra-small, ຈະປົກຄອງກັນ (100% ຄວາມເປັນຕົວ):

ຕົວຢ່າງ

<div class="container-fluid">
  <div class="row">
    <div class="col-xxl-6">
      <p>World Wide Fund for Nature (WWF), ຕັ້ງຂຶ້ນໃນວັນທີ 29 ເມສາ 1961, ສັນຍາລະບຽບຂອງພວກເຂົາແມ່ນໝາປະຈຳ ...</p>
    </div>
    <div class="col-xxl-6">
      <p>ປີ 1980, WWF ໄດ້ມາໄປປະເທດຈີນ, ໂດຍການເຊີນຮັບເອົາຈາກລັດຖະບານຈີນ ເພື່ອດໍາເນີນການປົກປ້ອງທີ່ປະກອບມີການປົກປ້ອງພວກສັນຍາວັນ ...</p>
    </div>
  </div>
</div>

ສອບສວນເອງ

ຫົນການຈັດການອັດຕະໂນມັດ

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

ຖ້າຂະຫຍາຍຈໍານວນສະໜາມຕໍ່າກວ່າ 1400pxລາຍການ:

<!-- ສອງຫົນ: ໃນອຸປະກອນຂະໜາດຫລາຍກວ່າ ຂະຫຍາຍ 50% ຄວາມເປັນຕົວ -->
<div class="row">
  <div class="col-xxl">1 of 2</div>
  <div class="col-xxl">2 of 2</div>
</div>
<!-- ສີ່ສອງຫົນ: ໃນອຸປະກອນຂະໜາດຫລາຍກວ່າ ຂະຫຍາຍ 25% ຄວາມເປັນຕົວ -->
<div class="row">
  <div class="col-xxl">1 of 4</div>
  <div class="col-xxl">2 of 4</div>
  <div class="col-xxl">3 of 4</div>
  <div class="col-xxl">4 of 4</div>
</div>

ສອບສວນເອງ