首页 » MUI » MUI栅格化系统 12格子比例不在使用百分比浮动

MUI栅格化系统 12格子比例不在使用百分比浮动

grid(栅格)

栅格系统简介:

MUI 提供了非常简单实用的12列响应式栅格系统。使用时只需在外围容器上添加.mui-row,在列上添加 .mui-col-[sm|xs]-[1-12],即可

(通过定义.mui-col-sm-6类在大屏(≥400px)设备上会展现为并排的两列,而.mui-col-xs-12在小屏(<400px)设备上会覆盖之前定义的类展现为水平排列)

栅格参数:

尺寸 超小屏幕(<400px)(Extrasmall) 小屏幕(≥400px) Small
类前缀 .mui-col-xs-[1-12] .mui-col-sm-[1-12]
列(column)数 12
可嵌套

 

有了栅格化我们就可以在排版的时候减少float的和百分比的使用,

缓解float塌陷和不同手机屏幕百分比超出的问题,但是呢,这个MUI的文档中是枫瑞博客注意看还是不够显眼 :zhenbang:

栅格化使用其实和Bootstrap是差不多的概念(好像都一样)

没有什么太大意外的几乎sm就可以了

看下案例界面

MUI栅格化系统  12格子比例不在使用百分比浮动

0x0 首先我们的有一个外框的DIV

<div class="mui-row">

</div>

0x1 写下你要的分段数,如果你是2段就是6-6了,3段就是4-4-4 ,只要最后相加和是12就行

<div class="mui-row">
	<label class="mui-col-sm-4 ">
		执行人:
	</label>
	<div class="mui-col-sm-8">
		吟枫瑞
	</div>
</div>

 

0x2 如果你想在分为2段之后在想在第一个6比例中再分2段也是可以的,子栅格只要也只需要和相等于12就可以

 

<div class="mui-row">
	<label class="mui-col-sm-4 ">
		执行人:
	</label>
	<div class="mui-col-sm-8">
		<div class="mui-col-sm-6">1</div>
		<div class="mui-col-sm-6">2</div>
	</div>
</div>

:yinxian:但MUI的尿性可能心情不好就给你排到下一行 其他请看枫瑞博客MUI源码

标签:

转载请声明原站来源:作者:枫瑞博客, 转载或复制请以 超链接形式 并注明出处 枫瑞博客网
原文地址:《MUI栅格化系统 12格子比例不在使用百分比浮动》 发布于2018-09-04

赞(0) 生成海报

评论 抢沙发

9 + 6 =


长按图片转发给朋友

微信公测版本发布啦
写bug咯!!写bug!!!多端微信小程序星宿适配中....