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>
上一篇: 自定义View(未完待续)