Bootstrap4的栅格布局

Bootstrap架构内置了一套响应式网格的布局系统，网格布局实际上就是把网页分成一定数量的栏数或者叫做网格，Bootstrap4的网格系统就是把网页分成12栏，如果你想让网页中的某一元素占用一定数量的栏数的宽度，你可以在该元素上添加一个类似于.col- *特定的类。

1 栅格容器

容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。Bootstrap4提供了如下容器：
.container：任意视窗下，添加补丁，固定尺寸容器
.container-fulid：任意视窗下，100%宽度容器
.container-[sm | md | lg | xl] ：100%显示到指定视窗时，固定尺寸容器

2 栅格布局的步骤

步骤1：声明栅格布局容器

<div class="container"></div>

步骤2：在容器中声明行

<div class="container">
	<div class="row"></div>
</div>

步骤3：在行中声明列

<div class="container">
	<div class="row">
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
		<div class="col"></div>
	</div>
</div>

3 关于列

3.1 设置列宽

3.1.1 平均分配栅格

.col :在所有视窗下平均分配栅格数
.col-[sm | md | lg | xl]：指定视窗及以上，平均分配栅格。
请编辑以下代码，在不同视窗下显示页面效果，然后修改.col类名为.col-sm，.col-md，.col-lg，.col-xl类名，理解Bootstrap架构的视窗断点。

<div class="container">
	<div class="row">
		<div class="col border">第1列</div>
		<div class="col border">第2列</div>
		<div class="col border">第3列</div>
	</div>
</div>

在Bootsrap4中，当我们平均分配栅格数的时候，可以在行标签添加如下类，可以指定该行所显示的列数。
.row-cols-*：任意视窗，该行所显示的列数。*代表的是1 – 6这六个数字。
.row-cols-[ sm | md | lg | xl ]-*：指定视窗及以上，该行所显示的列数

请编辑以下代码，在不同视窗下显示页面效果，然后修改`.row-cols-*`类名为`.row-cols-sm-*`，`.row-cols-md-*`，`.row-cols-lg-*`，`.row-cols-xl-*`类名，在不同视窗下显示页面的效果。
<div class="container">
	<div class="row row-cols-2">
		<div class="col border">第1列</div>
		<div class="col border">第2列</div>
		<div class="col border">第3列</div>
		<div class