layui栅格布局支持设置列间距,只需使用预置类layui-col-space*即可。不过实际使用时却始终看不到效果。
根据layui官网文档的说明,只需要在行所在div元素的class属性中增加layui-col-space*即可出现列间距。如下图所示:
但是实际使用时,一般会在行所在div元素中设置行背景色,此时设置列间距就看不出效果。html示例如下所示(示例代码取自参考文献1),将背景样式放在行所在div元素或者每列所在div元素的效果一样,都看不出间距。
<div class="layui-container">
<div class="layui-row layui-col-space10" style="background-color: red;">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
移动:6/12 | 平板:6/12 | 桌面:4/12
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
移动:6/12 | 平板:6/12 | 桌面:4/12
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
移动:4/12 | 平板:12/12 | 桌面:4/12
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
移动:4/12 | 平板:7/12 | 桌面:8/12
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
移动:4/12 | 平板:5/12 | 桌面:4/12
</div>
</div>
</div>
百度出来的文章(参考文献2-3)给出的解释是layui的间距样式设置采用的是padding(向内缩)在行div或列div上设置背景色会使整行或当前行的列区域全部显示背景色,向内缩的话不会有什么区别。正确的方式是将列内容再用div包一层,同时设置该层div的背景色,这样就能看出列间距效果。如下所示:
<div class="layui-container">
<div class="layui-row layui-col-space10">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" >
<div style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<div style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
<div style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
<div style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
<div style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12</div>
</div>
</div>
</div>
同时在行、列、内容上设置背景色时的效果如下所示:
<div class="layui-container">
<div class="layui-row layui-col-space10" style="background-color: rgb(49, 214, 99);">
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4" style="background-color: rgb(47, 15, 207);">
<div style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
<div style="background-color: red;">移动:6/12 | 平板:6/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
<div style="background-color: red;">移动:4/12 | 平板:12/12 | 桌面:4/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
<div style="background-color: red;">移动:4/12 | 平板:7/12 | 桌面:8/12</div>
</div>
<div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
<div style="background-color: red;">移动:4/12 | 平板:5/12 | 桌面:4/12</div>
</div>
</div>
</div>
参考文献:
[1]https://www.layui1.com/doc/index.html
[2]https://blog.csdn.net/qq_40943363/article/details/118052587
[3]https://www.jb51.net/article/264158.htm