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>
