手册
目录
Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列。
如果您不想单独使用所有 12 列，那么可以将这些列组合在一起，以创建更宽的列：
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
网格系统响应迅速，列会根据屏幕大小自动重新排列。
请确保总和等于或小于 12（如果不需要使用所有 12 个可用列）。
Bootstrap 5 网格系统有六个类：
.col- (超小型设备 - 屏幕宽度小于 576px).col-sm- (小型设备 - 屏幕宽度等于或大于 576px).col-md- (中型设备 - 屏幕宽度等于或大于 768 像素).col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素).col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px).col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)您可以组合上述类，以创建更动态和灵活的布局。
提示：每个类都是按比例放大的，所以如果你想为 sm 和 md 设置相同的宽度，你只需要指定 sm。
以下是 Bootstrap 5 网格的基本结构：
第一个例子：创建一行（ 第二个例子：不是给每个 下面我们整理了一些基本的 Bootstrap 5 网格布局的例子。 下例显示如何在所有设备和屏幕宽度上创建三个等宽列： 下例显示了如何从平板电脑开始创建四个等宽的列，然后扩展到超大桌面。在宽度小于 576px 的手机或屏幕上，列会自动堆叠在一起： 下例显示了如何在平板电脑得到两个不同宽度的列并扩展到超大型桌面： 提示：您将在本教程的后面学习有关 网格系统 的更多内容。.col-*-* 类的标签）。第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，而第二颗星代表数字，每行加起来应为 12。
col 添加一个数字，而是让 bootstrap 处理布局，以创建等宽的列：两个 "col" 元素 = 每个 col 为 50% 宽度，而三个 cols = 每个 col 为 33.33% 宽度。四个列 = 25% 宽度，等等。您还可以使用 .col-sm|md|lg|xl|xxl 使列获得响应性。三等分列
实例
响应式列
实例
两个不等的响应式列
实例
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
71万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
