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-hiddenwrapper.

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

<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. ນີ້ຈະລົບ margins ລົບອອກຈາກ .rowແລະແນວນອນ paddingຈາກທຸກຖັນເດັກນ້ອຍທັນທີທັນໃດ.

ຕ້ອງການການອອກແບບແຂບໄປແຂບ? ຖິ້ມພໍ່ແມ່ .containerຫຼື .container-fluid.

ໃນການປະຕິບັດ, ນີ້ແມ່ນວິທີທີ່ມັນເບິ່ງ. ກະລຸນາຮັບຊາບວ່າເຈົ້າສາມາດສືບຕໍ່ໃຊ້ອັນນີ້ກັບຫ້ອງຮຽນຕາໜ່າງທີ່ກຳນົດໄວ້ລ່ວງໜ້າທັງໝົດໄດ້ (ລວມທັງຄວາມກວ້າງຂອງຖັນ, ລະດັບການຕອບສະໜອງ, ການສັ່ງຄືນໃໝ່, ແລະອື່ນໆອີກ).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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,
);