---
url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
title: '让版块铺到边缘 | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:42:42+00:00'
updated: '2026-10-24T06:23:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  您可以让版块内容铺到边缘，或居中装箱而背景铺满窗口。版块上的一个开关决定：Full width。示例搭建灰色三列版块，再打开 Full width 让列拉伸。颜色和照片填充请参阅 背景。
  该视频搭建灰色三列版块，再让其内容铺到边缘。
tags:
  - Ontwerpgidsen
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T06:23:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 让版块铺到边缘
      description: |-
        您可以让版块内容铺到边缘，或居中装箱而背景铺满窗口。版块上的一个开关决定：Full width。示例搭建灰色三列版块，再打开 Full width 让列拉伸。颜色和照片填充请参阅 背景。
        该视频搭建灰色三列版块，再让其内容铺到边缘。
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:42:42+0000'
      dateModified: '2026-10-24T06:23:17+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/design/full-width-layouts'
      articleSection: Ontwerpgidsen
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/full-width-layouts'
      description: |-
        您可以让版块内容铺到边缘，或居中装箱而背景铺满窗口。版块上的一个开关决定：Full width。示例搭建灰色三列版块，再打开 Full width 让列拉伸。颜色和照片填充请参阅 背景。
        该视频搭建灰色三列版块，再让其内容铺到边缘。
      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) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 让版块铺到边缘.

 Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

   ## In this guide

 Related guides

- [给版块配颜色、照片或渐变背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)
- [让布局适配手机](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)

您可以让版块内容铺到边缘，或居中装箱而背景铺满窗口。版块上的一个开关决定：**Full width**。示例搭建灰色三列版块，再打开 **Full width** 让列拉伸。颜色和照片填充请参阅 [背景](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)。

该视频搭建灰色三列版块，再让其内容铺到边缘。

  ## 搭建装箱版块

1. 点击空内容区的 **Add Elements**，再选择 **Section**（**Layout** 选项卡中）。
2. 悬停版块，打开 **More** 并选择 **Settings**。
3. 打开 **Style** 面板，选择浅灰色 **Background**。
4. 点击 **Save**。灰色已经铺满窗口。
5. 点击版块上的 **+** 并选择 **Row**。
6. 点击行上的网格图标，选择三列等宽磁贴并点击 **Save**。
7. 每列点击 **+**，选择 **Text**（**Content** 选项卡中），输入 **Heading 4** 和一行文字，点击 **Save**。

三列现在位于灰色带中央的盒子里。

## 打开 Full width

1. 打开版块的 **More** 并选择 **Settings**。
2. 在 **General** 面板中打开 **Full width**。
3. 点击 **Save**。
4. 点击 DXPR Builder 工具栏上的 **Save**。
5. 打开视图菜单（工具栏上的眼睛图标），选择 **Preview**。

## 您会看到的内容

灰色带看起来和之前一样。变的只是内容盒：第一列从版块左边缘开始，最后一列在右边缘结束。

每个版块有两部分：带背景的外层元素，和装行的内层盒。**Full width** 只改变内层盒。关闭时它居中并有最大宽度；打开时拉伸到版块边缘。

## 设置

版块的 **General** 面板有三个布局开关，默认全关：

| 设置 | 作用 |
|---|---|
| **Full width** | 行铺满版块边缘，而不是居中装箱 |
| **100% height** | 版块至少与浏览器窗口等高 |
| **Vertical centering** | 行位于版块垂直居中 |

行没有自己的宽度设置；由版块决定。

## 两种样式

- **边缘到边缘的背景，装箱文本**：常见的主视觉。保持 **Full width** 关闭，在 **Style** 或 **Background effects** 面板中设置背景。
- **边缘到边缘的内容**：一排卡片或图片。打开 **Full width**，文本离窗口边缘太近时给列加些 **Padding**。

## 如果您看不到变化

- **打开 Full width 没有任何变化。** 在手机等窄屏上，装箱版本来就占满宽度。请加宽浏览器窗口再看。
- **背景到不了窗口边缘。** 主题把页面内容放在装箱区域中，版块只能填满该区域。请在主题中选择全宽页面布局或区域。
- **文本贴到窗口边缘。**这就是 **Full width** 的作用。请给列加 **Padding**（列 **Style** 面板中），或保持 **Full width** 关闭。

## 接下来做什么？

- [用颜色、照片或渐变填充版块](/zh-hans/hc/documentation/learn-dxpr-builder/design/backgrounds)：装饰内容背后的带。
- [让布局适配手机](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)：控制列在小屏幕上的行为。