栅格系统

栅格系统

在用这个系统之前,这个系统需要一个容器 这个容器不能写宽

container  固定宽容器

container-fluid 100%容器 永远占屏幕的100%

行(row)

列(col)

默认把每一行分成了12列

行包列

如果屏幕尺寸小于设置的范围,会默认往下排列

.col-xs-2  超小号  <768的时候  手机

.col-sm-  小屏    >=768      pad

.col-md-  中平    >=992      普通电脑

.col-lg-  大屏    >=1200    大屏

利用他实现响应式

只要前一个元素和后一个元素加起来大于12,后一个就下去

如果想要一块消失 clearfix visible-xs-block

col-md-offset-4  偏移量 向右偏移4位  可以配合不同尺寸来设置

col-lg-offset-4

col-xs-offset-4

col-sm-offset-4

row 里面可以继续放row

里面的row是按父级继续分12分

.col-md-push-  向后几格

.col-md-pull-* 向前几格

让一个块隐藏hidden-md|lg|xs|sm

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容