ໄລຍະຫ່າງ

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>

ຂອບທາງລົບ

ໃນ CSS, marginຄຸນສົມບັດສາມາດໃຊ້ຄ່າລົບ ( paddingບໍ່ສາມາດ). ໃນຖານະເປັນ 4.2, ພວກເຮົາໄດ້ເພີ່ມຜົນປະໂຫຍດຂອບທາງລົບສໍາລັບທຸກຂະຫນາດຈໍານວນເຕັມທີ່ບໍ່ແມ່ນສູນທີ່ລະບຸໄວ້ຂ້າງເທິງ (e.g., 1, 2, , 3, 4, 5). ຜົນປະໂຫຍດເຫຼົ່ານີ້ແມ່ນເຫມາະສົມສໍາລັບການປັບແຕ່ງ gutters ຖັນຕາຂ່າຍໄຟຟ້າໃນທົ່ວ breakpoints.

syntax ແມ່ນເກືອບຄືກັນກັບຄ່າເລີ່ມຕົ້ນ, ຜົນປະໂຫຍດຂອບທາງບວກ, ແຕ່ມີການເພີ່ມ nກ່ອນຂະຫນາດທີ່ຮ້ອງຂໍ. ນີ້ແມ່ນຫ້ອງຮຽນຕົວຢ່າງທີ່ກົງກັນຂ້າມກັບ .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

ນີ້ແມ່ນຕົວຢ່າງຂອງການປັບແຕ່ງ Bootstrap grid ຢູ່ທີ່ຈຸດແບ່ງຂະໜາດກາງ ( md) ແລະຂ້າງເທິງ. ພວກເຮົາໄດ້ເພີ່ມທະວີການ .colpadding ກັບ .px-md-5ແລະຫຼັງຈາກນັ້ນ counteracted ວ່າມີ .mx-md-n5ກ່ຽວກັບພໍ່ແມ່ .row.

ແຜ່ນຖັນແບບກຳນົດເອງ

<div class="row mx-md-n5">
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
</div>