Bootstrap4.x 布局系统
布局介绍
Bootstrap4.x提供了.container和.container-fluid两种方式。这两种方式是启用布局栅格系统最基本的元素。
.container是固体自适应方式，宽度固定
.container-fluid是流体100%自适应方式，宽度随着屏幕的增大而增大。
Bootstrap4.x自适应的响应方式如下：
@media (min-width:576px) 小屏幕
@media(min-width:768px) 中等屏幕
@media(min-width:992px) 大屏幕
@media(min-width:1200px) 超大屏幕
栅格系统
Bootstrap4.x 基于12列的布局，5种响应尺寸。具体采用div容器的行、列和对齐内容来构建响应式布局。所占格栅位正好是12列，超过12列则自动换行，小于12列则不能100%
Eg:
一行三列的布局
<div class="container"> <!--表示启用栅格行--> <div class="row"> <!--启用栅格列--> <div class="col-sm">第一列</div> <div class="col-sm">第二列</div> <div class="col-sm">第三列</div> </div> </div>
栅格等级
Bootstrap4.x有5个栅格等级，具体如下表：
超小屏幕 | 小屏幕 | 中等屏幕 | 大屏幕 | 超大屏幕
| |
| 尺寸 | <576px | >=576px | >=768px | >=992px | .>=1200px |
| 前缀 | .col- | .col-sm | .col-md- | .col-lg- | col-xl- |
如果同时使用两个或以上的级别，则遵循移动优先的原则；
<div class="container-fluid"> <div class="row"> <div class="col-sm-4 col-lg-6 col-xl-12">第一列</div> <div class="col-sm-4 col-lg-6 col-xl-12">第二列</div> <div class="col-sm-4 col-lg-12 col-xl-12">第三列</div> </div> </div>