本人第一次写博客,只为记录自己的学习日常。最近在自学layUI,我把其中自己遇到的问题记录下来,希望能帮到和我一样初学layUI的朋友。如果谁有更好的学习资料欢迎分享出来,供大家一起学习。本文都是我的一些碎碎念,有不足之处欢迎指正,不喜勿喷。
列间距:通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。我们结合网页常用的边距,预设了 12 种不同尺寸的边距,分别是:
layui-col-space1 列之间间隔 1px
layui-col-space3 列之间间隔 3px
layui-col-space5 列之间间隔 5px
layui-col-space8 列之间间隔 8px
layui-col-space10 列之间间隔 10px
layui-col-space12 列之间间隔 12px
layui-col-space15 列之间间隔 15px
layui-col-space18 列之间间隔 18px
layui-col-space20 列之间间隔 20px
layui-col-space22 列之间间隔 22px
layui-col-space28 列之间间隔 28px
layui-col-space30 列之间间隔 30px
(以上粘自layUI文档)
<div class="layui-row layui-col-space10">
<div class="layui-col-md4 bg">
1/3
</div>
<div class="layui-col-md4 bg">
1/3
</div>
<div class="layui-col-md4 bg">
1/3
</div>
</div>
我按照以上代码编写却怎么也显示不出列间距,只改变div的高度
查阅资料后,在layui-col-md4下又加了一层div就出来效果了
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<!-- 需要在layui-col-md4下再加一层div列间距有效 -->
<div class="bg">1/3</div>
</div>
<div class="layui-col-md4">
<div class="bg">1/3</div>
</div>
<div class="layui-col-md4">
<div class="bg">1/3</div>
</div>
</div>
效果图如下: