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>