Bootstrap5网格Grid系统中单元格宽度设置
2.1 默认等宽布局
如果我们不设置每个列的宽度，则默认有多少个列都会平均分布各列所占宽度，但是如果一行有超过12个列，将会出现不可预知的现象（我是为了研究一下做了几个测试，你没有必要去测试这个，如果你想布局超过12个，可以用表格）。下面我给出一段代码，后面将一直沿用这段代码，做一些微小的更改，不在重复给出。
采用col、col-栅格数 设置宽度的时候，预览效果请把窗口宽度设置为最大，否则可能会导致效果偏差，另外我们不建议实际应用中这样设置，请使用响应式网格布局，哪怕你不想响应。
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href="bootstrap5/bootstrap.min.css" rel="stylesheet"> <title>网格系统演示</title> </head> <body> <div> <div> <div> <h1>Bootstrap是什么？</h1> <p> 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 </p> </div> <div> <h1>Bootstrap是什么？</h1> <p> 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 </p> </div> <div> <h1>Bootstrap是什么？</h1> <p> 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 </p> </div> <div> <h1>Bootstrap是什么？</h1> <p> 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 </p> </div> </div> </div> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
这段代码效果显示如上图所示，你可以将下面单元格部分多复制几个，看一下效果。
<div class="col"> <h1>Bootstrap是什么？</h1> <p> 我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零 开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解 决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简 洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，即使是没有学过网页设计的开发 者，也能做出很专业、美观的页面，极大地提高了工作效率。 </p> </div>
2.2 设置每个列宽
试着将三个<div>中的col分别换为col-3，col-6，col-3或者其他的数值，总之三个数相加和为12即可。当然你也可以删除或者增加一个或几个单元格，总之一行的和为12即可。 通过这样的简单设置，可以非常方便的修改单元格的宽度。 下图是设置为col分别换为col-2，col-2，col-4，col-4显示效果
2.3 可变宽度的列
如果你在设置单元格数值的时候，如果有三个单元格，只设置了一个，则剩下的两个单元格会平分剩下的空间，这样就可以很方便的设置可变宽度的列了。提醒一下，设置固定值的单元格并不需要在前面，比如，2.1代码你可以设置第二个单元格占屏幕一般（col-6），其他单元格平均分配。
2.4 自动换行的列
当每个单元格都设置了宽度数值，当一行中，剩下的空间不再容纳某个单元格的时候，会自动换行。
-
将2.1的例子，将四个
<div>中的col都换为col-6，查看效果。
-
将2.1的例子，将四个
<div>中的col都换为col-12，查看效果。
-
将2.1的例子，将四个
<div>中的col都换为col-8，查看效果。
可以看出，虽然设置为col-8也可以每个单元格一行，但是文字只占屏幕的十二分八，也就是三分之二，所以如果没有特殊要求，尽量将每行的单元格数值相加正好为12。