## layout(布局参数) | 版本 | 更新内容 | | --- | --- | | 1.3.0 | 支持指定不同分辨率下的宽度 | >[info]从公测版2017-01-20开始，表单构建器支持简单的布局，如果需要复杂的布局方式，需要自己写模板 比如表单页面如下： ~~~ // 显示编辑页面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)], ['text', 'name', '栏目名称', '<span class="text-danger">必填</span>'], ['radio', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()], ['radio', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0], ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'], ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'], ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)], ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)], ['ckeditor', 'content', '栏目内容', '可作为单页使用'], ['icon', 'icon', '图标'], ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']], ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0], ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')], ['radio', 'status', '立即启用', '', ['否', '是']], ['text', 'sort', '排序'], ]) ->setFormData($info) ->fetch(); ~~~ 默认情况下是每一个表单项独占一行  我们可以用layout来设置各个表单项所占的宽度，比如： ~~~ // 显示编辑页面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)], ['text', 'name', '栏目名称', '<span class="text-danger">必填</span>'], ['radio', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()], ['radio', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0], ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'], ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'], ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)], ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)], ['ckeditor', 'content', '栏目内容', '可作为单页使用'], ['icon', 'icon', '图标'], ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']], ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0], ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')], ['radio', 'status', '立即启用', '', ['否', '是']], ['text', 'sort', '排序'], ]) ->setFormData($info) ->layout(['pid' => 6, 'name' => 6, 'model' => 6, 'type' => 6]) ->fetch(); ~~~ 那么最终界面如下;  layout方法接受一个数组，键是对应的表单项名，值为所占的宽度，和bootstrap的布局一致，一共可以设置1-12个单元格，具体的大家可以按自己的需求调整。 ### 添加表单项时设置布局参数 >[info] 从1.0.2开始，表单布局支持以下方式 在添加表单项时，直接在表单项类型后面添加布局宽度，用英文冒号（:）隔开。 ~~~ // 显示编辑页面 return ZBuilder::make('form') ->addFormItems([ ['hidden', 'id'], ['select:6', 'pid', '所属栏目', '<span class="text-danger">必选</span>', ColumnModel::getTreeList($id)], ['text:6', 'name', '栏目名称', '<span class="text-danger">必填</span>'], ['radio:6', 'model', '内容模型', '<span class="text-danger">必选</span>', DocumentModel::getTitleList()], ['radio:6', 'type', '栏目属性', '', ['最终列表栏目', '外部链接'], 0], ['text', 'url', '链接', '可以填写完整的url，如：<code>http://www.dolphinphp.com</code>，也可以填写 <code>模块/控制器/操作</code>，如：<code>cms/index/index</code>'], ['radio', 'target', '打开方式', '', ['_self' => '当前窗口', '_blank' => '新窗口'], '_self'], ['select', 'list_template', '列表页模板', '可选，模板目录： <code>cms/view/column</code>', parse_array($template_list)], ['select', 'detail_template', '详情页模板', '可选，模板目录： <code>cms/view/document</code>', parse_array($template_detail)], ['ckeditor', 'content', '栏目内容', '可作为单页使用'], ['icon', 'icon', '图标'], ['radio', 'post_auth', '是否支持投稿', '是否允许前台用户投稿', ['禁止投稿', '允许投稿']], ['radio', 'hide', '是否隐藏栏目', '隐藏后前台不可见', ['显示', '隐藏'], 0], ['select', 'rank_auth', '浏览权限', '', RoleModel::getTree(null, '开放浏览')], ['radio', 'status', '立即启用', '', ['否', '是']], ['text', 'sort', '排序'], ]) ->setFormData($info) ->fetch(); ~~~ ### 不同分辨率下设置不同的宽度 >[info] 从1.3.0开始支持 | 屏幕类型 | 值 | | --- | --- | | 超小屏幕手机 (<768px) | xs | | 小屏幕平板 (≥768px) | sm | | 中等屏幕桌面 (≥992px) | md | | 大屏幕桌面 (≥1200px) | lg | 格式： ~~~ ->layout(['字段名' => 'xs|sm|md|lg']) ~~~ 如： ~~~ ->layout(['pid' => '6|4|8|12']) ~~~ 或 ~~~ ->addFormItems([ ['select:6|4|8|12', 'pid', '所属栏目'], ]) ~~~ 表示在大屏幕桌面占12格，中等屏幕桌面占8，小屏幕平板占4格，超小屏幕手机6。 ~~~ ->layout(['pid' => '6']) ~~~ 或 ~~~ ->addFormItems([ ['select:6', 'pid', '所属栏目'], ]) ~~~ 表示所有分辨率下，都占6格。 默认不填写则以第一个参数为准。 ~~~ ->layout(['pid' => '6|||8']) ~~~ 或 ~~~ ->addFormItems([ ['select:6|||8', 'pid', '所属栏目'], ]) ~~~ 表示超小屏幕手机、小屏幕平板、中等屏幕桌面占6格，大屏幕桌面占8格。