Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义：

.col-sm-* 小屏幕 手机 （≥ 576px)

.col-md-* 中等屏幕 平板 （≥ 768px)

.col-lg-* 大屏幕  桌面显示器 （≥ 992px)

.col-xl-* 超大屏幕 大桌面显示器 （≥ 1200px)

说明：

1.  col- 列；-*表示占列，即占自动每个row分12列栅格系统比；

2.sm-small  小; md-medium  中等; lg-large 大; xl-Extra large  超大.

3. 栅格系统自动将每个row分为12列，col-sm-* 星号所代表的参数表示当前屏幕中该div所占列数.

   例如：<div class="col-sm-6  col-md-3"> 这个div 在小屏幕中占6列（放两个div），但是在中等屏幕中占3列（放四个div),如果我们需要在小屏幕上并排显示4个div，则col-sm-3;有助于解决排版问题;

4.案例：

     <div class="row">
         //每row分为12列，每个div占用3列，在小屏幕上可以并排显示4个div
         <div class="col-sm-3"></div>
         <div class="col-sm-3"></div>
         <div class="col-sm-3"></div>
         <div class="col-sm-3"></div>
     </div>

5. .col-sm-* .col-md-* .col-lg-* .col-xl-* 混合使用其意义为在不同的屏幕大小情况下变更排版效果

     <div class="row">
         //每row分为12列，在使用屏幕大小变化时，排版也随之变化，以下代码的意思是当屏幕为小屏幕时这个div占用9列，中等屏幕时占用6列，大屏幕时占用3列.
         <div class="col-sm-9 col-md-6 col-lg-3"></div>
     </div>

6.   .col 的用法：flexbox的网格自动进行布局意味着我们也可只设置一列的宽度，让并排的其他列自动调整大小

     <div class="row">
         //每row分为12列，只指定一列的宽度5/12，剩余列自动平分剩余7/12
         <div class="col"></div>
         <div class="col-5">占用5/12</div>
         <div class="col"></div>
     </div>