Bootstrap5网格响应式布局
3.1 什么是响应式布局
关于响应式布局，简单来说就是在不同屏幕大小的时候，展现出的页面布局不同。例如手机看的时候一行只有一个单元格，平板看的时候一行两个单元格，电脑看的时候有三个。Bootstrap可以很方便的实现这种功能。
3.2 Bootstrap 网格系统屏幕大小划分
看看下面的表格，是不是很熟悉，和断点的规定一模一样，只是多了个xs而已，其实默认就是xs，所以可以直接省略。可以看到，Bootstrap通过5个断点，将屏幕分为6种大小类型。
| xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
| Container容器 | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| 屏幕大小类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
3.3 Bootstrap 网格响应式布局实例
将2.1的例子，将四个<div>都换成<div class="col-12 col-md-6 col-lg-4">，改变浏览器窗口大小，查看效果，这段代码的意思是<768px的时候，一行只有一列（每列宽12栅格），当768px<宽度<992px的时候是两列（每类宽6栅格），当大于992px的时候每行3列（每列宽4栅格）。 下面是一段演示录像
当然你还可以换分的更细一点,换成
<div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">。
在这里告诉你个小技巧，如果你想一行显示几列，宽度只就是用12除以几，哈哈，估计你也能想得到。
3.4 如果你不想响应
如果你想让所有的浏览器显示效果一致，都分为两列，也就是不想让它响应式显示，那么很简单，你把所有的屏幕下的栅格数设置相同的数值即可<div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6">，这样就可以保持任何屏幕下一致了。