Bootstrap 4 中网格系统的列布局更改
第一个代码块用 Bootstrap 3 编写。在 Bootstrap 3 中有 4 种类型的列规范，即 col-md-* col-lg-* col-sm-* col-xs-*。完全响应的布局在 Bootstrap 3 中将如下所示：
<div class="row">
<div class="col-lg-4 col-md-8 col-sm-8 col-xs-8">
contents
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
contents
</div>
</div>
在 Bootstrap 4 中，他们添加了一个低于 768px 的新 sm 网格层，以实现更精细的控制。所以 Bootstrap 4 有 col-* (xs), col-sm-*, col-md-*, col-lg-*, and col-xl-*。所以过去在 v3 中的 .col-md-6 现在是 v4 中的 .col-lg-6。请注意，-xs 中缀已被删除，因此 .col-6 代表超小（默认）断点处的 6 个列单位。
所以，如果我们现在想在 Bootstrap 4 中编写相同的上述示例，它将如下所示：
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-8">
contents
</div>
<div class="col-xl-8 col-lg-8 col-md-4 col-sm-4 col-4">
contents
</div>
</div>
