Bootstrap 5 Grid: ຈາກການຕິດຕັ້ງໄປຫຼັງນໍ້າຕາມລະດັບ

  • ບ່ອນໜ້າຫນ້າຫນ້າຫນ້າ BS5 Grid System
  • ບ່ອນໜ້າຫນ້າໜ້າຫນ້າໜ້າຫນ້າ BS5 Grid XSmall

ບົດສະຫຼຸບການຈັດສັບ: ການຕິດຕັ້ງສູງຫຼັງນໍ້າຕາມລະດັບ

ພວກເຮົາຈະສ້າງລະບົບການຈັດສັບການສະແດງສະໜາມທີ່ເລີ່ມຈາກການຕິດຕັ້ງໃນອຸປະກອນນ້ອຍຫຼັງນໍ້າຕາມລະດັບແຕ່ຫຼັງນໍ້າຕາມລະດັບໃຫຍ່ຈະປ່ຽນເປັນການຈັດສູງຫຼັງນໍ້າຕາມລະດັບ:

ບົດສະຫຼຸບທີ່ຖືກສະແດງຢູ່ດ້ານດຽວກັນເຊິ່ງເປັນການຕິດຕັ້ງສູງຫຼັງນໍ້າຕາມລະດັບສອງສອງອັນສະແດງຄວາມຄິດ50%/50%ທັງໝົດສະໜາມຈັກກະຈາຍຄົນພະຍາຍາມບໍ່ມີສະໜາມນໍ້າຕາມລະດັບນ້ອຍທີ່ຈະຕິດຕັ້ງຢ່າງອັດຕາ100%:

ຄວາມຄິດ: ການຕິດຕັ້ງສູງຫຼັງນໍ້າຕາມລະດັບ

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ສີ່ສອງ 1 ...</p>
    </div>
    <div class="col-sm-6 bg-dark">
      <p>ສີ່ສອງ 2 ...</p>
    </div>
  </div>
</div>

ທ້າທາຍພວກເຈົ້າເອງ

ຄຳແນະນຳ:.col-sm-* ຕົວເລກໃນປະເພດຄົນນັ້ນຈະກຳນົດວ່າ div ຄວນບັນທັດຈຳນວນສີ່ສອງທີ່ມີ (ຈຳນວນສີ່ສອງທີ່ມີ 12). ມັນຈະຖືກ..col-sm-1 ບັນທັດ 1 ສີ່ສອງ,.col-sm-4 ບັນທັດ 4 ສີ່ສອງ,.col-sm-6 ບັນທັດ 6 ສີ່ສອງ, ຕາມມານີ້.

ຄຳແນະນຳ:ລະວັງການຮັບປະກັນວ່າລວມມີຈຳນວນຫນັງຫລາຍຫລາຍຫນັງ ຄວາມຫລາຍຫລາຍຫນັງ 12 (ບໍ່ຈໍາເປັນທີ່ນຳໃຊ້ທຸກ 12 ສີ່ສອງທີ່ມີ)

ຄຳແນະນຳ:ຜ່ານ .container-fluid ປ່ຽນປະເພດ .container ເປັນ .containerທຸກຢ່າງທີ່ມີປະເພດ .container, full-width ການປ່ຽນການຕັ້ງກັນວົງພາບເປັນ fixed-width ການຕັ້ງກັນວົງພາບຫນັງ

ຕົວຢ່າງ: ການຕັ້ງກັນຈຸດສະແດງທີ່ຕອບສະໜອງ:

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>ສີ່ສອງ 1 ...</p>
    </div>
    <div class="col-sm-6">
      <p>ສີ່ສອງ 2 ...</p>
    </div>
  </div>
</div>

ທ້າທາຍພວກເຈົ້າເອງ

ການຕັ້ງກັນສະໜອງວົງພາບອັນດັບຫນັງ

ໃນ Bootstrap 5, ມີວິທີຄວາມງ່າຍຂອງການສ້າງສີ່ສອງທີ່ມີວົງພາບດຽວກັນໃຫ້ທຸກອຸປະກອນ: ພຽງແຕ່ຈາກ .col-size-* ຫຼັງຈາກລຶບຈາກຕົວເລກ, ແລະພຽງແຕ່ນຳໃຊ້ໃນປະເພດ col: .col-size ປະເພດ. Bootstrap ຈະຮັບຮູ້ຈາກຈຳນວນສີ່ສອງທີ່ຈະຮັບຮູ້, ແລະແຕ່ລະສີ່ສອງຈະມີວົງພາບດຽວກັນ. ປະເພດ size (sm, md ແລະອື່ນໆ) ຈະກຳນົດວ່າເມື່ອສີ່ສອງຈະຕອບສະໜອງ:

<!-- ສີ່ສອງ: ວົງພາບ 50% ຂອງຈຸດສະແດງ, ບໍ່ມີສິ່ງນ້ອຍສູງ (100% ວົງພາບ) -->
<div class="row">
  <div class="col-sm">1 of 2</div>
  <div class="col-sm">2 of 2</div>
</div>
<!-- ສີ່ສອງ: ວົງພາບ 25% ຂອງຈຸດສະແດງ, ບໍ່ມີສິ່ງນ້ອຍສູງ (100% ວົງພາບ) -->
<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>

ທ້າທາຍພວກເຈົ້າເອງ

  • ບ່ອນໜ້າຫນ້າຫນ້າຫນ້າ BS5 Grid System
  • ບ່ອນໜ້າຫນ້າໜ້າຫນ້າໜ້າຫນ້າ BS5 Grid XSmall