看了Layui文档列间隔的相关文档,LayUI示例效果如下:
接着参考示例代码,写下如下代码:
<div class="layui-row layui-col-space30" >
<div class="layui-col-md6" style="height:200px;background-color: red;">
</div>
<div class="layui-col-md6" style="height:200px;background-color: red;">
</div>
</div>
自己页面显示的效果,马麦皮.........:
找了半天原因,感觉自己没写错啊,百思不得其姐.....................,最后发现是列间隔必须作用在其子DIV的内,不然是不会生效的。正确代码如下:
<div class="layui-row layui-col-space30" >
<div class="layui-col-md6" >
<p style="height:200px;background-color: red;"></p>
</div>
<div class="layui-col-md6">
<p style="height:200px;background-color: red;"></p>
</div>
</div>
效果如下,Nice: