layui 列间距BUG

最新推荐文章于 2021-08-05 23:34:02 发布

凌涑

最新推荐文章于 2021-08-05 23:34:02 发布

阅读量1.2k

点赞数 1

文章标签： layui

本文链接：https://blog.csdn.net/qq_40943363/article/details/118052587

版权

看了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：