---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
title: '添加行 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:42+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  行将版块分成多个列，以便并排放置内容：三项服务、文本旁边的照片、文章旁边的侧栏。从十二种预设中选择分栏，还可以单独为手机设置布局。阅读本页了解如何添加行；要在列内再加行，请参见嵌套。

  添加行
  本例向版块添加一行三列，团队每项服务一列。
tags:
  - Lay-out
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 添加行
      description: |-
        行将版块分成多个列，以便并排放置内容：三项服务、文本旁边的照片、文章旁边的侧栏。从十二种预设中选择分栏，还可以单独为手机设置布局。阅读本页了解如何添加行；要在列内再加行，请参见嵌套。

        添加行
        本例向版块添加一行三列，团队每项服务一列。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T08:19:42+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns'
      description: |-
        行将版块分成多个列，以便并排放置内容：三项服务、文本旁边的照片、文章旁边的侧栏。从十二种预设中选择分栏，还可以单独为手机设置布局。阅读本页了解如何添加行；要在列内再加行，请参见嵌套。

        添加行
        本例向版块添加一行三列，团队每项服务一列。
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 首页
            item: 'https://dxpr.com/zh-hans'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: zh-hans
---
[Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Lay-out](/hc/documentation/learn-dxpr-builder/layout/overview) # 添加行.

 Learn DXPR BuilderBuild pagesAdd contentLay-out

   ## In this guide

 Related guides

- [添加嵌套布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)
- [添加版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)
- [让布局适配手机](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)

行将版块分成多个列，以便并排放置内容：三项服务、文本旁边的照片、文章旁边的侧栏。从十二种预设中选择分栏，还可以单独为手机设置布局。阅读本页了解如何添加行；要在列内再加行，请参见[嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)。

## 添加行

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

1. 点击 **+** 在版块上以打开元素选择器。
2. 选择 **Row** 从 **Layout** 选项卡。它带两个等宽列到来。
3. 点击网格图标（**Column layout**）。在行的控制栏上选择列预设如三个等宽列，并点击 **Save**.
4. 点击 **+** 在列中以向其添加内容。
5. 点击 **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。** 列通过布局移除。点击行的网格图标并选择列数更少的预设。

## 接下来做什么？

- [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)：将行放入列中以获得更细的网格。
- [版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)：为列周围的横幅设置自己的背景。
- [响应式设计](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)：布局如何适配每种屏幕尺寸。