ໄລຍະຫ່າງ

Bootstrap ປະກອບມີລະດັບຄວາມກ້ວາງຂອງຂອບການຕອບສະ ໜອງ ແບບຫຍໍ້ແລະຊັ້ນປະໂຫຍດ padding ເພື່ອດັດແປງຮູບລັກສະນະຂອງອົງປະກອບ.

ມັນເຮັດວຽກແນວໃດ

ກຳນົດຄ່າ ທີ່ເປັນມິດກັບຕອບສະໜອງ marginຫຼື paddingຄ່າໃຫ້ກັບອົງປະກອບ ຫຼືສ່ວນຍ່ອຍຂອງດ້ານຂອງມັນດ້ວຍຊັ້ນຮຽນສັ້ນ. ປະກອບມີການສະຫນັບສະຫນູນຄຸນສົມບັດສ່ວນບຸກຄົນ, ຄຸນສົມບັດທັງຫມົດ, ແລະຄຸນສົມບັດຕັ້ງແລະແນວນອນ. ຫ້ອງຮຽນແມ່ນສ້າງຂຶ້ນຈາກແຜນທີ່ Sass ເລີ່ມຕົ້ນຕັ້ງແຕ່ .25remເຖິງ 3rem.

ໝາຍເຫດ

Spacing utilities ທີ່ນໍາໃຊ້ກັບ breakpoints ທັງຫມົດ, from xsto xl, ບໍ່ມີ breakpoint ຫຍໍ້ຢູ່ໃນພວກມັນ. ນີ້ແມ່ນຍ້ອນວ່າຫ້ອງຮຽນເຫຼົ່ານັ້ນຖືກນໍາໃຊ້ຈາກ min-width: 0ແລະຂຶ້ນ, ແລະດັ່ງນັ້ນຈຶ່ງບໍ່ໄດ້ຖືກຜູກມັດໂດຍການສອບຖາມສື່. ຈຸດຢຸດທີ່ຍັງເຫຼືອ, ແນວໃດກໍ່ຕາມ, ລວມມີຕົວຫຍໍ້ຂອງ breakpoint.

ຫ້ອງຮຽນຖືກຕັ້ງຊື່ໂດຍໃຊ້ຮູບແບບ ແລະ {property}{sides}-{size}ສໍາ ລັບ , , , ແລະ .xs{property}{sides}-{breakpoint}-{size}smmdlgxl

ບ່ອນທີ່ ຊັບສິນ ແມ່ນຫນຶ່ງໃນ:

m- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້margin
p- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້padding

ບ່ອນທີ່ ຂ້າງ ແມ່ນຫນຶ່ງໃນ:

t- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-topຫຼືpadding-top
b- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-bottomຫຼືpadding-bottom
l- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-leftຫຼືpadding-left
r- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດໄວ້ margin-rightຫຼືpadding-right
x- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດທັງສອງ *-leftແລະ*-right
y- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດທັງສອງ *-topແລະ*-bottom
blank - ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ a marginຫຼື paddingທັງຫມົດ 4 ດ້ານຂອງອົງປະກອບ

ບ່ອນທີ່ ຂະຫນາດ ແມ່ນຫນຶ່ງໃນ:

0- ສໍາລັບຫ້ອງຮຽນທີ່ລົບລ້າງ marginຫຼື paddingໂດຍການຕັ້ງມັນ0
1- (ໂດຍຄ່າເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ marginຫຼື paddingເປັນ$spacer * .25
2- (ໂດຍຄ່າເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ marginຫຼື paddingເປັນ$spacer * .5
3- (ໂດຍຄ່າເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ marginຫຼື paddingເປັນ$spacer
4- (ໂດຍຄ່າເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ marginຫຼື paddingເປັນ$spacer * 1.5
5- (ໂດຍຄ່າເລີ່ມຕົ້ນ) ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດ marginຫຼື paddingເປັນ$spacer * 3
auto- ສໍາລັບຫ້ອງຮຽນທີ່ກໍານົດເປັນ marginອັດຕະໂນມັດ

(ທ່ານສາມາດເພີ່ມຂະຫນາດເພີ່ມເຕີມໂດຍການເພີ່ມການເຂົ້າໄປໃນ $spacersຕົວແປຂອງແຜນທີ່ Sass.

ຕົວຢ່າງ

ນີ້ແມ່ນຕົວຢ່າງຕົວແທນຂອງຫ້ອງຮຽນເຫຼົ່ານີ້:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

ການວາງກາງແນວນອນ

ນອກຈາກນັ້ນ, Bootstrap ຍັງປະກອບມີ .mx-autoຫ້ອງຮຽນສໍາລັບການວາງໄວ້ກາງທາງຂວາງຂອງເນື້ອໃນລະດັບຄວາມກວ້າງຂອງຕັນ - ນັ້ນແມ່ນ, ເນື້ອຫາທີ່ມີ display: blockແລະ widthຊຸດ - ໂດຍກໍານົດຂອບອອກຕາມລວງນອນເປັນ auto.

ອົງປະກອບກາງ

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>