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就可以了
看下案例界面
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源码