欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-03 23:05:40
根据Bootstrap--Grid 中 col-sm-* col-md-* col-lg-* col-xl-*的意义: .col-sm-* 小屏幕 手机 (≥ 576px) .col-md-* 中等屏幕 平板 (≥ 768px) .col-lg-* 大屏幕 桌面显示器 (≥ 992px) .col- ......

根据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>