添加行.

Learn DXPR BuilderBuild pagesAdd contentLay-out

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

一行三个等宽列,每列一个服务标题 Design、Development 和 Marketing,以及一行文本

添加行

本例向版块添加一行三列,团队每项服务一列。

  1. 点击 + 在版块上以打开元素选择器。
  2. 选择 Row 从 Layout 选项卡。它带两个等宽列到来。
  3. 点击网格图标(Column layout)。在行的控制栏上选择列预设如三个等宽列,并点击 Save.
  4. 点击 + 在列中以向其添加内容。
  5. 点击 Save 在工具栏上以存储页面。

网格图标紧随行的拖拽手柄。点击预设后列立即变化;Cancel 可恢复旧布局。

The Row layout dialog on its Medium devices (768px and up) panel with the 1/3 + 1/3 + 1/3 tile selected, beside the row of three columns Design, Build and Grow

您会看到的内容

三项服务并排,每列为版块宽度的三分之一。屏幕窄于 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。 列通过布局移除。点击行的网格图标并选择列数更少的预设。

接下来做什么?

  • 嵌套:将行放入列中以获得更细的网格。
  • 版块:为列周围的横幅设置自己的背景。
  • 响应式设计:布局如何适配每种屏幕尺寸。