---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
title: '用列布局内容 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:24:58+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  这里您在一页上构建四种最常用的列布局：带侧边栏的内容、两个等分、三分和四分。每种上方都有标题。用它了解哪种预设适合哪种内容。每行设置请参见 行和列。
  本视频构建市政垃圾收集页面。
tags:
  - 'Volg een tutorial'
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:24:58+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/tutorials/multi-column-content'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/tutorials/multi-column-content'
      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) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # 用列布局内容.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [添加版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections)

这里您在一页上构建四种最常用的列布局：带侧边栏的内容、两个等分、三分和四分。每种上方都有标题。用它了解哪种预设适合哪种内容。每行设置请参见 [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。

本视频构建市政垃圾收集页面。

  ## 开始之前

- 您的角色有 **Edit with DXPR Builder** 权限。
- 页面在页面构建器中打开。新页面请前往 **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`），然后点击 **Save**.
- 新元素落在版块顶部。因此每个标题在其行之后放入：它落在行上方。

## 选择布局

| 布局 | 适用于 | 预设 |
|---|---|---|
| 带侧边栏的内容 | 带相关链接的文章 | **2/3 + 1/3** |
| 两个等分 | 前后对比 | 行的默认值 |
| 三个三分之一 | 功能亮点、服务 | **1/3 + 1/3 + 1/3** |
| 四个相等的四分之一 | 统计、小卡片 | **1/4 + 1/4 + 1/4 + 1/4** |

新的 **Row** 带两个等宽列到来。其他每个布局来自行的网格图标（**Column layout**).

## 第 1 步：带侧边栏的内容

1. 点击 **Add Elements** 在空白页面上并选择 **Section** 从 **Layout** 选项卡。
2. 点击 **+** 在版块上并选择 **Row**。点击其网格图标（**Column layout**），选择 **2/3 + 1/3** 预设并点击 **Save**.
3. 点击 **+** 在宽列中并选择 **Text** 从 **Content** 选项卡。输入文章，将第一行设为 **Heading 3** 并点击 **Save**.
4. 点击 **+** 在窄列中并选择 **Text**。输入 "Related" 为 **Heading 4**，为每个相关页面添加一行并点击 **Save**.
5. 点击 **+** 在版块上并选择 **Text**；它落在行上方。输入 "Content with a sidebar" 为 **Heading 2** 并点击 **Save**.

## 第 2 步：两个等分

1. 悬停版块并点击 **Add Section Below**。打开新版块的 **More** > **Settings**，选择浅灰色 **Background**：**Style** 面板并点击 **Save**.
2. 点击 **+** 在版块上并选择 **Row**。默认即两个等宽列，无需更改。
3. 添加一个 **Text** 每列中的元素："Before" 和 "After" 作为 **Heading 4** 每行一个。
4. 如第 1 步以同样方式添加标题 "Two equal halves"。

## 第 3 步：三个三分之一

1. 添加第三个版块，其中包含 **Add Section Below** 并为其提供 **Align text center** 类。
2. 添加一个 **Row**，点击其网格图标（**Column layout**），选择 **1/3 + 1/3 + 1/3** 预设并点击 **Save**.
3. 添加一个 **Text** 每列中的元素："Paper"、"Glass" 和 "Organic" 作为 **Heading 4** 每行一个。
4. 添加标题 "Three equal thirds"。

## 第 4 步：四个四分之一

1. 添加第四个版块，带浅灰色 **Background** 和 **Align text center** 类。
2. 添加一个 **Row**，点击其网格图标（**Column layout**），选择 **1/4 + 1/4 + 1/4 + 1/4** 预设并点击 **Save**.
3. 添加一个 **Text** 每列中的元素：日期作为 **Heading 4** 以及收集的内容。
4. 添加标题 "Four equal quarters"。

## 第 5 步：保存并预览

1. 点击 **Save** 在页面构建器工具栏上。
2. 打开视图菜单（ **眼睛图标**），然后选择 **Preview**.

## 在较小屏幕上

768 像素宽起列并排显示，因此平板与桌面显示相同布局。手机上每列占全宽，按顺序堆叠。要为平板设置其他布局，请点击行的网格图标（**Column layout**），然后选择 **Add screen size**.

## 进一步了解

视频中未展示：

- **窄、宽、窄**：**1/4 + 1/2 + 1/4** 预设以空边距保持长文本可读。
- **Mirror row**：在行的设置中打开以在平板和桌面交换列。手机保持原顺序，因此第一列仍在首位。

## 您会看到的内容

四个横幅依次排列，每个顶部都有标题。文章及其相关链接共享第一个，两个等分布于灰色上，随后三个居中三分之一，最后灰色上四个居中四分之一收尾。

## 如果您看不到如图所示的列

- **行的列数错误。** 仅当点击以下内容时预设生效 **Save** 在布局对话框中。点击行的网格图标（**Column layout**），再次选择预设并点击 **Save**.
- **标题位于其行下方。** 标题在行之前放入，新元素落在版块顶部。用其控制栏上的拖动手柄将标题拖到行上方。
- **列在平板上堆叠。** 平板窄于 768 像素，如竖屏小平板。用以下内容为该宽度添加布局 **Add screen size** 在行的布局对话框中。
- **重新加载后更改消失。** 您在点击之前离开页面 **Save** 在页面构建器工具栏上。如果 Save 报错，参见 [更改无法保存](/zh-hans/hc/documentation/learn-dxpr-builder/troubleshooting/saving-fails)。

## 接下来做什么？

- [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) 用于每行设置
- [版块](/zh-hans/hc/documentation/learn-dxpr-builder/layout/sections) 用于版块背景和宽度