码上飞AI后台卡片每行列数可调为1~6列,编辑态下通过属性面板修改“每行列数”并保存即生效,或在源码中修改cols值、添加gridTemplateColumns样式实现精准控制。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

在码上飞AI生成的后台管理界面或数据看板中,卡片默认按三列排列,但实际业务场景常需适配宽屏显示器、移动端预览或密集信息展示需求,这时必须手动调整每行显示的卡片数量。
进入页面编辑模式
登录码上飞平台 → 点击左侧「我的应用」→ 找到目标应用 → 点击右侧「编辑」按钮 → 等待页面加载完成,进入可视化编辑界面。
注意:只有在「编辑」状态下才能修改布局参数,预览或发布后无法直接调整列数。
通过组件属性面板修改列数
在编辑界面中,用鼠标单击任意一张数据卡片(如“维修任务统计”“报修趋势图”等)→ 右侧自动弹出「组件属性」面板 → 找到「布局设置」区域 → 将「每行列数」数值从默认的3改为所需值(支持输入1~6之间的整数)。
【修改后需点击右上角「保存」才生效,不保存则刷新页面即恢复原设置】
改完立刻生效,无需重新生成或部署,当前编辑态下即可实时看到卡片重排效果。
使用代码方式精准控制(进阶)
方法一:切换至「源码编辑」模式 → 在对应卡片容器的 JSON 配置块中,找到 layout 字段 → 修改 cols 属性值,例如 "cols": 4。
方法二:若该卡片属于自定义列表组件,可在其 dataConfig 中添加 gridTemplateColumns: 'repeat(5, 1fr)' 样式声明。
这一步操作起来很简单,直接把文件拖进去就行。但要注意:手动写 CSS 会覆盖属性面板设置,二者不可混用;且仅限高级用户操作,误改可能导致整体布局错乱。










