bootstrap栅格系统显示规则
发表于:2024-11-27 作者:热门IT资讯网编辑
编辑最后更新 2024年11月27日,移动设备优先(bootstrap 3.x版)xs总是水平排放sm小于768px时 垂直排放sm大于等于768px 水平排放md小于992px时 垂直排放md大于等于992px时 水
移动设备优先(bootstrap 3.x版)xs总是水平排放sm小于768px时 垂直排放sm大于等于768px 水平排放md小于992px时 垂直排放md大于等于992px时 水平排放lg小于1200px时 垂直排放lg大于等于1200px 水平排放
总结:
1 较大尺寸未设置时,默认会继承较小的尺寸
123
像上面的情况:大屏和中等屏都是3列显示,小于中等屏(也就是<992px)的时候就会垂直显示
2 响应式布局: 根据尺寸变化,当达到临界值时,匹配相应的设置
bootstrap中的媒体查询
3 理解水平排放和垂直排放和总是水平排放的原理
水平排放,说明该栅格是具有浮动属性的,bs都是用的float:left,左浮动
垂直排放,说明该栅格是不具有浮动属性,那么该div就会独占一行,所以就会垂直排放,并且在bs中会同时让该元素的width设置成100%,所以此时就是一整行排放了
总是水平排放(col-xl-*),说名拥有col-xl-*类名的div,始终具有float属性。注意,总是水平排放,不代表拥有col-xl-*类名的div不能垂直排放,比喻说让每一个div添加col-xl-12类名,就是垂直排放,因为此时width是100%,但是他们还是拥有float属性