ບັນຈຸ

ເຂົາເຈົ້າເຮັດວຽກແນວໃດ

Containers ແມ່ນອົງປະກອບໂຄງຮ່າງພື້ນຖານທີ່ສຸດໃນ Bootstrap ແລະ ຕ້ອງການໃນເວລາທີ່ນໍາໃຊ້ລະບົບຕາຂ່າຍໄຟຟ້າເລີ່ມຕົ້ນຂອງພວກເຮົາ . ຕູ້ຄອນເທນເນີແມ່ນໃຊ້ເພື່ອບັນຈຸ, pad, ແລະ (ບາງຄັ້ງ) ເນື້ອຫາຢູ່ກາງຂອງພວກມັນ. ໃນຂະນະທີ່ຕູ້ຄອນເທນເນີ ສາມາດ ເຮັດຮັງໄດ້, ການຈັດວາງສ່ວນໃຫຍ່ບໍ່ຈໍາເປັນຕ້ອງມີຖັງທີ່ມີຮັງ.

Bootstrap ມາພ້ອມກັບສາມຖັງທີ່ແຕກຕ່າງກັນ:

• .container, ເຊິ່ງກໍານົດ a max-widthໃນແຕ່ລະຈຸດພັກຜ່ອນທີ່ຕອບສະຫນອງ
• .container-{breakpoint}, ເຊິ່ງແມ່ນ width: 100%ຈົນກ່ວາ breakpoint ທີ່ກໍານົດໄວ້
• .container-fluid, ເຊິ່ງ width: 100%ຢູ່ໃນຈຸດຢຸດທັງຫມົດ

ຕາຕະລາງຂ້າງລຸ່ມນີ້ສະແດງໃຫ້ເຫັນວິທີການ max-widthປຽບທຽບຂອງແຕ່ລະຖັງກັບຕົ້ນສະບັບ .containerແລະ .container-fluidໃນທົ່ວແຕ່ລະ breakpoint.

ເບິ່ງພວກມັນໃນການປະຕິບັດແລະປຽບທຽບພວກມັນຢູ່ໃນ ຕົວຢ່າງຕາຕະລາງ ຂອງພວກເຮົາ .

ກ່ອງບັນຈຸເລີ່ມຕົ້ນ

ຫ້ອງຮຽນ ເລີ່ມຕົ້ນຂອງພວກເຮົາ .containerແມ່ນກ່ອງບັນຈຸທີ່ມີຄວາມກວ້າງຄົງທີ່ທີ່ຕອບສະໜອງໄດ້, ຊຶ່ງໝາຍເຖິງ max-widthການປ່ຽນແປງຂອງມັນໃນແຕ່ລະຈຸດຢຸດ.

<div class="container">
  <!-- Content here -->
</div>

ບັນຈຸທີ່ຕອບສະຫນອງ

ຕູ້ຄອນເທນເນີທີ່ຕອບສະຫນອງຊ່ວຍໃຫ້ທ່ານສາມາດກໍານົດຊັ້ນຮຽນທີ່ມີຄວາມກວ້າງ 100% ຈົນກ່ວາຈຸດຢຸດທີ່ກໍານົດຈະບັນລຸ, ຫຼັງຈາກນັ້ນພວກເຮົານໍາໃຊ້ max-widths ສໍາລັບແຕ່ລະ breakpoints ທີ່ສູງກວ່າ. ຕົວຢ່າງ, .container-smແມ່ນກວ້າງ 100% ເພື່ອເລີ່ມຕົ້ນຈົນກ່ວາ smຈຸດຢຸດຈະບັນລຸ, ບ່ອນທີ່ມັນຈະຂະຫຍາຍດ້ວຍ md, lg, xl, ແລະ xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

ບັນຈຸນ້ໍາ

ໃຊ້ .container-fluidສໍາລັບບັນຈຸຄວາມກວ້າງເຕັມ, ຂະຫຍາຍຄວາມກວ້າງທັງຫມົດຂອງຊ່ອງເບິ່ງ.

<div class="container-fluid">
  ...
</div>

ຊາສ

ດັ່ງທີ່ສະແດງຢູ່ຂ້າງເທິງ, Bootstrap ສ້າງຊຸດຂອງຊັ້ນບັນຈຸທີ່ກໍານົດໄວ້ລ່ວງຫນ້າເພື່ອຊ່ວຍໃຫ້ທ່ານສ້າງຮູບແບບທີ່ທ່ານຕ້ອງການ. ເຈົ້າອາດຈະປັບແຕ່ງຫ້ອງບັນຈຸທີ່ກຳນົດໄວ້ລ່ວງໜ້າເຫຼົ່ານີ້ໂດຍການດັດແກ້ແຜນທີ່ Sass (ພົບໃນ _variables.scss) ທີ່ໃຫ້ອຳນາດແກ່ພວກມັນ:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

ນອກເຫນືອຈາກການປັບແຕ່ງ Sass, ທ່ານຍັງສາມາດສ້າງຖັງຂອງທ່ານເອງກັບ Sass mixin ຂອງພວກເຮົາ.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

ສໍາ​ລັບ​ຂໍ້​ມູນ​ເພີ່ມ​ເຕີມ​ແລະ​ຕົວ​ຢ່າງ​ກ່ຽວ​ກັບ​ວິ​ທີ​ການ​ແກ້​ໄຂ​ແຜນ​ທີ່ Sass ແລະ​ຕົວ​ແປ​ຂອງ​ພວກ​ເຮົາ​, ກະ​ລຸ​ນາ​ເບິ່ງ ​ພາກ Sass ຂອງ​ເອ​ກະ​ສານ Grid .