添加行.
行将版块分成多个列,以便并排放置内容:三项服务、文本旁边的照片、文章旁边的侧栏。从十二种预设中选择分栏,还可以单独为手机设置布局。阅读本页了解如何添加行;要在列内再加行,请参见嵌套。

添加行
本例向版块添加一行三列,团队每项服务一列。
- 点击 + 在版块上以打开元素选择器。
- 选择 Row 从 Layout 选项卡。它带两个等宽列到来。
- 点击网格图标(Column layout)。在行的控制栏上选择列预设如三个等宽列,并点击 Save.
- 点击 + 在列中以向其添加内容。
- 点击 Save 在工具栏上以存储页面。
网格图标紧随行的拖拽手柄。点击预设后列立即变化;Cancel 可恢复旧布局。

您会看到的内容
三项服务并排,每列为版块宽度的三分之一。屏幕窄于 768 像素时列堆叠:每列占全宽,按页面顺序。
列的高度仅与其内容相当,因此短列会在长列之前结束。给列加上背景色后这一点很明显;Equal-height columns 可使其等高。
设置行
列布局
网格图标为每种有自己布局的屏幕尺寸打开面板。每个面板将这十二个预设显示为磁贴:
| 预设 | 布局 |
|---|---|
| 1/1 | 一个全宽列 |
| 1/2 + 1/2 | 两个等宽列 |
| 1/3 + 1/3 + 1/3 | 三个等宽列 |
| 1/4 + 1/4 + 1/4 + 1/4 | 四个等宽列 |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | 六个等宽列 |
| 1/4 + 1/2 + 1/4 | 窄、宽、窄 |
| 1/6 + 4/6 + 1/6 | 窄、很宽、窄 |
| 1/4 + 3/4 | 左四分之一,右四分之三 |
| 3/4 + 1/4 | 左四分之三右四分之一 |
| 2/3 + 1/3 | 左宽右窄 |
| 1/3 + 2/3 | 左窄右宽 |
| 5/12 + 7/12 | 左稍窄右稍宽 |
对于其他任何分栏,点击 Custom Layout 并以分数形式输入宽度,例如 1/6 + 5/6。总和超过 1 的宽度换行显示。再次打开对话框时, Custom Layout 被标记并显示布局,例如 Custom Layout (1/6 + 5/6).
每种屏幕尺寸的布局
第一个面板,Medium devices (≥ 768px),设置平板及更大屏幕的布局。要同时更改手机布局,请点击对话框顶部的 Add screen size。此时会打开 Extra small (< 576px) 面板;如需其他尺寸,请从其列表中选择,然后选择预设。Remove screen size 可再次删除面板。
行和列设置
打开 More > Settings 在行的控制栏上,或在列的栏上进行列设置。
| 设置 | 元素 | 它的作用 | 默认值 |
|---|---|---|---|
| Equal-height columns | Row | 将每列拉伸到最高列的高度 | Off |
| Mirror row | Row | 从 768 像素起按相反顺序显示列;堆叠的列保持页面顺序 | Off |
| Vertical centering | Column | 将内容在其更高的列中居中 | Off |
Mirror row 适合交替行的页面:照片左,然后照片右,手机始终先显示照片。
移动和移除列
通过手柄拖动列,或使用其栏上的 More > Move Left 或 Move Right。。列没有 Delete:请选择列数更少的预设。内容不会因此丢失;它会移到剩下的最后一列。
如果您看不到它
- 列上的 Vertical centering 无变化。 列仅与其内容等高,因此没有居中空间。打开 Equal-height columns 在行的设置中。
- 列在手机上堆叠。 768 像素以下默认如此。点击网格图标,然后 Add screen size,并为以下内容选择预设 Extra small (< 576px).
- 文本跳到另一列。 您选择了列更少的预设,被移除列的内容移到最后一列。按 Ctrl+Z (Cmd+Z 在 Mac 上)以撤销更改。
- 列的 More 菜单中没有 Delete。 列通过布局移除。点击行的网格图标并选择列数更少的预设。