bug是这样的
从上面的图片来看问题出现的原因主要是覆盖了官方原有的样式。
解决方案 如下:
layui-col-space* 使用之后发现 左边多了padding 而官网是这样描述的
通过“列间距”的预设类,来设定列之间的间距。且一行中最左的列不会出现左边距,最右的列不会出现右边距。列间距在保证排版美观的同时,还可以进一步保证分列的宽度精细程度。
我的代码是这样写的
//外层容器 类名 layui-row .items_con{ overflow: hidden; margin: 0 20px; }
类名items_con覆盖了layui-col-space30的样式 所以在laui-col-space30的基础上是不能加margin的 因为layui-col-space30的源码是这样的:
.layui-col-space30{margin:-15px}.layui-col-space30>*{padding:15px}
设置margin 造成了样式覆盖,造成了多了padding
解决方案再去嵌套一级 layui-row 当然也可以不加layui-row这个类名
加完之后的效果如下:
问题解决 ok! 谢谢关注