解决：layui卡片card和栅格布局一起使用，出现layui-card-body没有高度的问题

樱花落海洋111

于 2024-02-03 17:24:29 发布

阅读量653

点赞数 4

文章标签： layui 前端 html

本文链接：https://blog.csdn.net/m0_71959044/article/details/136009957

版权

1.出现的问题

2.为什么会出现这个问题？

在写页面时一个编辑页面和一个查看页面，编辑页面没有使用栅格布局。查看页面使用了栅格布局出现了上述问题。

解决方式：在layui-card-body上面添加layui-row.清除浮动

<script id="data_Info" type="text/html">
    <div class="layui-row">
        {{# layui.each(d, function (index, item) { }}
        <div class="layui-col-xs12 layui-col-md6 layui-col-lg3">
            <div class="layui-card  sonContainor edit" data-index="{{index}}" data-value="{{item.FormulaArgId}}" style="height: 80%; margin-top: 10px;">
                <div class="layui-card-header">
                    <span style="margin-left:20px;float:left;color:#ffff"><span class="layui-badge layui-bg-blue" style="top: 3px; "><b> {{index+1}}</b></span></span>
                </div>
                <div class="layui-card-body layui-row sonBody">

                    <div class="layui-col-xs12 ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">参数名称</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.ArgName}} </div>
                    </div>
                    <div class="layui-col-xs12 ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">参数说明</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.ArgText}} </div>
                    </div>
                    <div class="layui-col-xs12 ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">业务分类</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.ArgBusClsName}} </div>
                    </div>
                    <div class="layui-col-xs12 ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">数据源</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.DataSouceVal}} </div>
                    </div>
                    <div class="layui-col-xs12  ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">是否多选</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.IsMultiSelect ? '是':'否' }} </div>
                    </div>
                    <div class="layui-col-xs12 ">
                        <div class="layui-col-xs6 layui-col-sm4 dataInfo">是否必填</div>
                        <div class="layui-col-xs6 layui-col-sm8 value"> {{ item.IsRequired ? '是':'否' }} </div>
                    </div>

                </div>
            </div>
        </div>
        {{# }); }}
    </div>
</script>

3.效果图