css col-3,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 在小屏幕中占6列(放两个div)，但是在中等屏幕中占3列(放四个div),如果我们需要在小屏幕上并排显示4个div，则col-sm-3;有助于解决排版问题;

4.案例：

//每row分为12列，每个div占用3列，在小屏幕上可以并排显示4个div