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源码

(0)
枫瑞博客枫瑞博客
上一篇 2018-08-31
下一篇 2018-09-07

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注