---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting'
title: '添加嵌套布局 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T08:19:28+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:28+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/nesting'
      articleSection: Lay-out
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting'
      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/positioned-layers)
- [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)
- [添加选项卡面板](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)

可将行放入列以再次拆分该列，如标题上方并排的两个图标。当一列需要比周围行更细的网格时使用。本例向三列行的中间列添加两个图标的行。第一行，从以下内容开始 [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。

## 添加嵌套布局

1. 添加带行和列的版块。
2. 悬停列并点击 **+** 在其 Column 栏上。
3. 在元素选择器中，选择 **Row** 从 **Layout** 选项卡。
4. 嵌套行出现在列内，带自己的列。
5. 像往常一样向嵌套列添加元素，例如一个 **Icon** 到每个中。
6. 点击 **Save** 在工具栏上以存储页面。

新元素落在列顶部，因此嵌套行位于列文本上方。

  ## 您会看到的内容

铅笔和星星在中间列顶部并排，位于 Design 标题上方。外列不变。在编辑器中，嵌套行有自己的 Row 和 Column 栏，在外行的栏内。

```text
Section
  Row (1/3 + 1/3 + 1/3)
    Column
      Text: Discovery
    Column
      Row (nested, 1/2 + 1/2)
        Column
          Icon: pencil
        Column
          Icon: star
      Text: Design
    Column
      Text: Delivery

```

## 设置嵌套布局

嵌套行与普通行有相同的网格图标和设置；请参见[行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。其宽度是父列的份额，而非页面的份额。一个半宽列中嵌套两个等分的行，可得到两个四分之一宽的区域。

屏幕窄于 768 像素时，嵌套列像外层列一样堆叠。为嵌套行提供手机布局，通过 **Add screen size** 如果图标应保持并排。

### 最大嵌套深度

行嵌套最多三层：一行、其某列中的一行，以及其中再嵌套一行。第四层被拒绝。同一限制分别适用于每种容器类型，如 Tabs 中的 Tabs。一种类型从不计入另一种类型的限制。

两层覆盖大多数布局。每多一层增加需瞄准的控制栏并缩小内容空间。

### 常见嵌套模式

| 模式 | 如何构建 |
|---|---|
| 功能网格 | 一行三列，每列带嵌套行：图标位于其文本旁边 |
| 侧边栏区块 | 2/3 + 1/3 行，其窄列中嵌套行，每个区块一行 |
| 团队成员 | 两列行，每列嵌套 1/3 + 2/3 行：人物肖像配简介 |

## 如果您看不到它

- **警告称行最多只能嵌套 3 层。** 该列已位于两个嵌套行内，因此显示 "Element cannot be added"。将行添加到高一级的列，或在外行使用列更多的预设。
- **嵌套行位于文本上方而非下方。** 新元素落在列顶部。打开 **More** 在嵌套行的栏上并选择 **Move Down**。
- **图标在手机上堆叠。** 嵌套列在 768 像素以下堆叠，与所有列一样。点击嵌套行的网格图标，然后 **Add screen size**，并选择 **1/2 + 1/2** 为 **Extra small (< 576px)**.

## 接下来做什么？

- [Positioned layers](/zh-hans/hc/documentation/learn-dxpr-builder/layout/positioned-layers)：以网格无法实现的方式重叠元素。
- [行和列](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：列预设和每种屏幕尺寸的布局。
- [Tabs](/zh-hans/hc/documentation/learn-dxpr-builder/layout/tabs-element)：将内容面板堆叠在一处，而非并排。