Gutters
Gutters ແມ່ນຊ່ອງຫວ່າງລະຫວ່າງຖັນຂອງທ່ານ, ຖືກນໍາໃຊ້ເພື່ອຕອບສະຫນອງຊ່ອງຫວ່າງແລະການຈັດລໍາດັບເນື້ອຫາໃນລະບົບຕາຂ່າຍໄຟຟ້າ Bootstrap.
ເຂົາເຈົ້າເຮັດວຽກແນວໃດ
-
Gutters ແມ່ນຊ່ອງຫວ່າງລະຫວ່າງເນື້ອໃນຖັນ, ສ້າງໂດຍແນວນອນ
padding
. ພວກເຮົາຕັ້ງpadding-right
ແລະpadding-left
ໃສ່ແຕ່ລະຖັນ, ແລະໃຊ້ລົບmargin
ເພື່ອຊົດເຊີຍນັ້ນໃນຕອນເລີ່ມຕົ້ນແລະທ້າຍຂອງແຕ່ລະແຖວເພື່ອຈັດລໍາດັບເນື້ອຫາ. -
Gutters ເລີ່ມຕົ້ນທີ່
1.5rem
(24px
) ກວ້າງ. ນີ້ອະນຸຍາດໃຫ້ພວກເຮົາຈັບຄູ່ຕາຂ່າຍໄຟຟ້າຂອງພວກເຮົາກັບ ຂະຫນາດ padding ແລະຂອບ spacers . -
Gutters ສາມາດຕອບສະຫນອງໄດ້. ໃຊ້ຫ້ອງຮຽນ gutter ສະເພາະຈຸດແຍກເພື່ອດັດແປງຮ່ອງລະບາຍນ້ຳຕາມລວງນອນ, ທໍ່ລະບາຍນ້ຳຕັ້ງ, ແລະທໍ່ລະບາຍນ້ຳທັງໝົດ.
Gutters ອອກຕາມລວງນອນ
.gx-*
ຫ້ອງຮຽນສາມາດຖືກນໍາໃຊ້ເພື່ອຄວບຄຸມຄວາມກວ້າງຂອງ gutter ອອກຕາມລວງນອນ. .container
ຫຼື ພໍ່ ແມ່ .container-fluid
ອາດຈະຕ້ອງໄດ້ຮັບການປັບຖ້າຫາກວ່າ gutters ຂະຫນາດໃຫຍ່ຖືກນໍາໃຊ້ເກີນໄປເພື່ອຫຼີກເວັ້ນການ overflow ທີ່ບໍ່ຕ້ອງການ, ການນໍາໃຊ້ປະໂຫຍດ padding ຈັບຄູ່. ຕົວຢ່າງ, ໃນຕົວຢ່າງຕໍ່ໄປນີ້ພວກເຮົາໄດ້ເພີ່ມ padding ດ້ວຍ .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ການແກ້ໄຂທາງເລືອກແມ່ນການເພີ່ມ wrapper ປະມານ .row
ກັບ .overflow-hidden
ຫ້ອງຮຽນ:
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
Gutters ຕັ້ງ
.gy-*
ຫ້ອງຮຽນສາມາດຖືກນໍາໃຊ້ເພື່ອຄວບຄຸມຄວາມກວ້າງຂອງທໍ່ຕັ້ງ. ເຊັ່ນດຽວກັນກັບ gutters ອອກຕາມລວງນອນ, gutters ຕັ້ງສາມາດເຮັດໃຫ້ overflow ຂ້າງລຸ່ມນີ້ .row
ໃນຕອນທ້າຍຂອງຫນ້າໃດຫນຶ່ງ. ຖ້າສິ່ງນີ້ເກີດຂື້ນ, ທ່ານເພີ່ມ wrapper .row
ກັບ .overflow-hidden
ຫ້ອງຮຽນ:
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ທໍ່ລະບາຍນ້ຳແນວນອນ ແລະແນວຕັ້ງ
.g-*
ຫ້ອງຮຽນສາມາດຖືກນໍາໃຊ້ເພື່ອຄວບຄຸມຄວາມກວ້າງຂອງ gutter ຕາມລວງນອນ, ສໍາລັບຕົວຢ່າງຕໍ່ໄປນີ້ພວກເຮົາໃຊ້ຄວາມກວ້າງຂອງ gutter ຂະຫນາດນ້ອຍກວ່າ, ດັ່ງນັ້ນມັນຈະບໍ່ມີຄວາມຈໍາເປັນທີ່ຈະເພີ່ມຊັ້ນ .overflow-hidden
wrapper.
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ຖັນແຖວຖົມ
ຫ້ອງຮຽນ Gutter ຍັງສາມາດຖືກເພີ່ມໃສ່ ຖັນແຖວ . ໃນຕົວຢ່າງຕໍ່ໄປນີ້, ພວກເຮົາໃຊ້ຖັນແຖວທີ່ຕອບສະຫນອງແລະຫ້ອງຮຽນ gutter ທີ່ຕອບສະຫນອງ.
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
ບໍ່ມີ gutters
gutters ລະ ຫວ່າງ ຖັນ ໃນ ຫ້ອງ ຕາ ຂ່າຍ ໄຟ ຟ້າ ກໍາ ນົດ ໄວ້ ຂອງ ພວກ ເຮົາ ສາ ມາດ ເອົາ ອອກ ໄດ້ ດ້ວຍ .g-0
. ນີ້ຈະລົບ margin
s ລົບອອກຈາກ .row
ແລະແນວນອນ padding
ຈາກທຸກຖັນເດັກນ້ອຍທັນທີທັນໃດ.
ຕ້ອງການການອອກແບບແຂບໄປແຂບ? ຖິ້ມພໍ່ແມ່ .container
ຫຼື .container-fluid
.
ໃນການປະຕິບັດ, ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງ. ກະລຸນາຮັບຊາບວ່າເຈົ້າສາມາດສືບຕໍ່ໃຊ້ອັນນີ້ກັບຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າທັງໝົດໄດ້ (ລວມທັງຄວາມກວ້າງຂອງຖັນ, ລະດັບການຕອບສະໜອງ, ການສັ່ງຄືນໃໝ່, ແລະອື່ນໆອີກ).
<div class="row g-0">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
ປ່ຽນຮ່ອງລະບາຍນ້ຳ
ຫ້ອງຮຽນແມ່ນສ້າງຂຶ້ນຈາກ $gutters
ແຜນທີ່ Sass ເຊິ່ງສືບທອດມາຈາກ $spacers
ແຜນທີ່ Sass.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);