当前博客:06-快码FOF中文编程layui教学-类名:lay-栅格间隔

239 次浏览【转载需注明来源】

博客作者:【qiang】

个性签名:请输入个性签名___________

layui栅格是没有间距的,相邻的两个元素会紧挨着,就不太好看,这个时候我们就需要用到一个类名 lay-栅格间隔n

间隔预设了很多种边距,分为:

1、1-30的双数间隔,例如:lay-栅格间隔2,lay-栅格间隔4,lay-栅格间隔6,...,lay-栅格间隔28,lay-栅格间隔30;

2、以及 lay-栅格间隔1,lay-栅格间隔5,lay-栅格间隔15,lay-栅格间隔25。

参考以下代码:

<区块 类名="lay-容器">
	<区块 类名="lay-栅格行 lay-栅格间隔10">
		<区块 类名="lay-栅格中屏3">
			<区块 类名="lay-红色背景">4/1</区块>
		</区块>
		<区块 类名="lay-栅格中屏3">
			<区块 类名="lay-红色背景">4/1</区块>
		</区块>
		<区块 类名="lay-栅格中屏3">
			<区块 类名="lay-红色背景">4/1</区块>
		</区块>
		<区块 类名="lay-栅格中屏3">
			<区块 类名="lay-红色背景">4/1</区块>
		</区块>
	</区块>
</区块>
Markup

代码效果展示:

注意:

lay-栅格间隔n 的类名要放在 lay-栅格行。

点击此处跳转案例下载:点击下载lay-栅格间隔类名实例

06-快码FOF中文编程layui教学-类名:lay-栅格间隔