> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 表单布局

> 本页面介绍了表单设计器中的布局设置，包括组件布局、组件列数配置、布局容器使用、分组组件应用以及不同设备端的访问效果展示。

表单设计器基础设置完成之后可直接对设计器整体页面去单独设置排版。

## 1. 表单布局介绍

### 1.1 组件布局

在宜搭中，组件布局默认是一列。

**布局容器**、**分组**、\*\*子表单(表格方式)\*\*这三个控件默认宽度是 100%，其余的控件占 50%，占页面宽度的一半

如果某个表单想使用 100% 的宽度，可以使用**布局容器**设置。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639466188956-b68dcd5d-9030-4f7c-bee9-da7b2d2776d1.png)
</Frame>

组件

### 1.2 组件列数

如果想使用两列布局，可点击表单设置属性下面的列数进行设置。

开启两列布局后，如果某个表单想单独占宽 100%，可以点击当前组件高级设置下的两列。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639466236928-dc5a9057-6b81-48dd-9091-8ae1f31ba4ea.png)
</Frame>

表单设置-PC端设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612066758740-188d58af-7295-4487-98b0-e402f61baf60.png)
</Frame>

### 1.3 布局容器

布局容器控件可以更灵活的来布局你的页面，除了上面提到的可以支持单独占宽 100%，还可以实现任意列数布局。

布局容器配置请点击：[布局容器](/zh/yida/form/wql6d2)

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639466845807-879483f4-c243-4e7e-86d5-bb9578313c16.png)
</Frame>

设置布局

### 1.4 使用分组

使用分组组件，可以将你的表单进行分组和增加分组表单，并且可以实现组件搭建样式布局，增加页面的美观

可参考下图的进行配置：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639468795083-90639552-02f5-4f36-88e9-e9c63ae68136.png)
</Frame>

页面设置

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469125978-2c168b7a-1339-4f15-8909-f37548197d89.png)
</Frame>

### 1.5 访问效果

预览访问：

当点击表单界面预览访问应用时、可直接查看当前表单整体配置页面，不可提交数据，不可修改表单设置，无侧边栏导航，页面有固定的 1180 的宽度限制。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469161949-37bab2c6-f6e0-4de6-aedb-152ea6aa4e9b.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469184522-423af5bc-e9f7-4ab8-b82d-36ef25ca1018.png)
</Frame>

保存访问：

点击保存该表单进入到应用中心页面，从当前应用顶部点击访问去查看该表单时，该表单侧边导航栏会显示，可点击导航栏查看其他表单页面，可提交数据，不可编辑表单。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469216082-069325d8-8ec8-4e01-95fc-f8325cef0253.png)
</Frame>

### 1.6 多端效果

针对上面说的 5 种布局方式，在移动端展现和 PC 端有所不同，在移动端默认都是单列布局。

另外，在 Pad 端上也会进行自适应布局。

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469463143-9faf88c8-b68b-474e-9b4b-87479b01b824.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469584165-df15dc09-4e2f-40b7-99e4-8d3bd3e0c43e.png)
</Frame>

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1612068488601-56497a2c-5ddf-4b0d-a421-ae86ad07c3be.png)
</Frame>

**注**：如果在移动端有特殊的需求，需要在表单内顶部点击移动端设置多列布局，如下图配置：

<Frame>
  ![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1639469662818-259ed04e-f7b0-43a7-9018-5b90e19f584e.png)
</Frame>