需求：
超大屏一行四个
大屏一行两个
小屏及手机一行一个
代码实现如下：
<div class="row">
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>疑问：
Bootstrap 4提供了非常灵活的栅格布局，可以让你轻松地创建响应式网站。以下是关于Bootstrap 4栅格布局的一些常见用法：
<div class="container">创建一个包含所有子元素的容器。然后使用<div class="row">创建一个行，然后使用<div class="col-md-4">创建一个4列的单元格。```html
```
<媒体查询>来实现响应式设计。例如，你可以创建一个具有自适应宽度的容器，当屏幕宽度小于600px时，它将显示为两列布局。```html
```
自定义网格布局：Bootstrap 4提供了多种网格布局选项，包括网格系统、网格系统-行、网格系统-列等。你可以使用这些选项来创建自定义的网格布局。
动态网格布局：Bootstrap 4提供了动态网格布局的选项，例如动态网格-行和动态网格-列。你可以使用这些选项来创建动态的网格布局。
总的来说，Bootstrap 4的栅格布局非常灵活，可以满足各种设计需求。
