当前位置: 萬仟网 > IT编程>网页制作>Html5 > Bootstrap4中栅格系统CSS中 col-sm-* col-md-* col-lg-*的意义以及当其同时具有col-xs-* col-sm-* col-md-* col-lg-*的含义

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

2019年05月14日 07:40  | 萬仟网IT编程  | 我要评论

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

 

您可能感兴趣的文章:

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com