Bootstrap 5 网格系统

网格系统

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

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

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

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

网格类

Bootstrap 5 网格系统提供六个类：

  • .col- (超小型设备 - 屏幕宽度小于 576px)
  • .col-sm- (小型设备 - 屏幕宽度等于或大于 576px)
  • .col-md- (中型设备 - 屏幕宽度等于或大于 768px)
  • .col-lg- (大型设备 - 屏幕宽度等于或大于 992px)
  • .col-xl- (超大型设备 - 屏幕宽度等于或大于 1200px)
  • .col-xxl- (特大型设备 - 屏幕宽度等于或大于 1400px)

组合上述类，可创建更动态和灵活的布局。

提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要规定 sm。

Bootstrap 5 网格的基本结构

以下是 Bootstrap 5 网格的基本结构：

<!-- 控制列宽，以及它们在不同设备上的显示方式 -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- 或者让 Bootstrap 自动处理布局 -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

亲自试一试

第一个例子：创建一行（<div class = "row">）。然后，添加所需数量的列（带有 .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-
网格行为 始终水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平 折叠开始，在断点之上水平
容器宽度 None (auto) 540px 720px 960px 1140px 1320px
适用于 手机竖屏 手机横屏 平板电脑 笔记本电脑 笔记本电脑和台式机 笔记本电脑和台式机
列的 # 12 12 12 12 12 12
Gutter 宽度 1.5rem (在列的每侧 .75rem ) 1.5rem (在列的每侧 .75rem ) 1.5rem (在列的每侧 .75rem ) 1.5rem (在列的每侧 .75rem ) 1.5rem (在列的每侧 .75rem ) 1.5rem (在列的每侧 .75rem )
可嵌套 Yes Yes Yes Yes Yes Yes
偏移 Yes Yes Yes Yes Yes Yes
列排序 Yes Yes Yes Yes Yes Yes