Bootstrap 5 Grid System

网格系统

Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。

如果您不想单独使用所有 12 列，您可以将这些列组合在一起以创建更宽的列：

网格系统响应迅速，列会根据屏幕大小自动重新排列。

请确保总和等于或小于 12（不需要使用所有 12 个可用列）。

ປະເພດGrid

Bootstrap 5 Grid System ສະໜອງປະເພດຫົກປະເພດ:

  • .col- (ອຸປະກອນຄົງໃຫຍ່ຫຼາຍ - ຂະໜາດໜ້າຈໍາກັດຕ່ຳກວ່າ 576px)
  • .col-sm- (ອຸປະກອນຄົງໃຫຍ່ - ຂະໜາດໜ້າຈໍາກັດຄືກັບຫຼາຍກວ່າ 576px)
  • .col-md- (ອຸປະກອນຄົງໃຫຍ່ - ຂະໜາດໜ້າຈໍາກັດຄືກັບຫຼາຍກວ່າ 768px)
  • .col-lg- (ອຸປະກອນຄົງໃຫຍ່ - ຂະໜາດໜ້າຈໍາກັດຄືກັບຫຼາຍກວ່າ 992px)
  • .col-xl- (ອຸປະກອນຄົງໃຫຍ່ຫຼາຍ - ຂະໜາດໜ້າຈໍາກັດຄືກັບຫຼາຍກວ່າ 1200px)
  • .col-xxl- (ອຸປະກອນຄົງໃຫຍ່ - ຂະໜາດໜ້າຈໍາກັດຄືກັບຫຼາຍກວ່າ 1400px)

ການປະສົມປະສານປະເພດດັ່ງກ່າວສາມາດສ້າງການຈັດການພາບກາງທີ່ມີຄວາມມີຫົນຫາຍແລະຫາຍຍາວ.

ຄຳເຕືອນ:ແຕ່ລະປະເພດແມ່ນຖືກຂະຫຍາຍຕາມອັດຕາພາດສ່ວນແລະຖ້າເຈົ້າຕ້ອງການຈັດການກວ້າງຄວາມກວ້າງສຳລັບ sm ແລະ md ໂດຍການກໍານົດ sm.

ຂໍ້ຄວາມພາບກາງ Bootstrap 5 Grid

ນີ້ແມ່ນຂໍ້ຄວາມພາບກາງຂອງ Bootstrap 5 Grid:

亲自试一试

第一个例子：创建一行（

）。然后，添加所需数量的列（带有 .col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表一个数字，每行加起来应为 12。

第二个例子：不是给每个 col 添加一个数字，而是让 bootstrap 处理布局，来创建等宽的列：两个 "col" 元素 = 每个列的 50% 宽度，而三个列 = 每个列的 33.33% 宽度。四列 = 25% 宽度等。您还可以使用 .col-sm|md|lg|xl|xxl 使列具有响应性。

网格选项

下表总结了 Bootstrap 5 网格系统如何在不同的屏幕尺寸上工作：

超小型 (<576px) 小型 (>=576px) 中型 (>=768px) 大型 (>=992px) 超大型 (>=1200px) 特大型 (>=1400px)
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
网格行为 始终水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平
ຄວາມແຮງຂອງການບໍ່ມີບາດການ ບໍ່ມີ (auto) 540px 720px 960px 1140px 1320px
ສະເພາະສາມາດນຳໃຊ້ ຄອບບອກພິມະຂ້າງສູນ ຄອບບອກພິມະກະໂດງ ຄອບບອກພິມະ ຄອບບອກຄອບພິມະ ຄອບບອກຄອບພິມະ ຄອບບອກຄອບພິມະ
ທີ່ # ກະດູກ 12 12 12 12 12 12
ຄວາມແຮງຂອງການບໍ່ມີບາດການ 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem ) 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem ) 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem ) 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem ) 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem ) 1.5rem (ໃນເສັ້ນຂອງກະດູກ .75rem )
ສາມາດຈັດລຳດັບໄດ້ ດີ ດີ ດີ ດີ ດີ ດີ
ການສະໝັກ ດີ ດີ ດີ ດີ ດີ ດີ
ການຈັດລຳດັບກະດູກ ດີ ດີ ດີ ດີ ດີ ດີ