栅格布局

1、web页面中,布局方式有三种

在这里插入图片描述

2、栅格的概念

我们把每一行布局分成12分
元素的占地宽度靠份数定义

3、栅格属性

1.使用栅格必须放在.container中,或者.container-fluid中
2.每一行每一个row,弹性,主轴x,可以换行,有-15px的左右外边距
3.使用col-n,来声明元素在row中占几份
自带左右-15px的内边距

4、响应式的栅格布局

一行四列,大屏幕1:1:1:1 中屏幕 两个一行1:1/1:1
小屏幕 每个单独一行
col-*-n *:xl/lg/md/sm n:1-12
在不同屏幕下占一行的多少份
ex:col-lg-3 col-sm-6
注意
.row的-15px左右外边距
和.col的15px左右内边距,会导致布局对不齐
项目中要进行处理
在这里插入图片描述
在这里插入图片描述

5、 .col

使用.col类,不添加数据,自动处理布局
没有给col平均分配空间,col可以超过12个,并且不换行

6、boot媒体查询的兼容性问题

boot中的媒体查询,小屏幕向大屏幕兼容
sm兼容md /lg/xl
md兼容lg/xl
lg兼容xl

7、列偏移

offset-*-n *:sm/md/lg/xl n:0~11
col向右偏移n份

8、栅格嵌套

请在col中单独写出div.row
在这里插入图片描述

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值