--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' title: '在 12 列网格上规划列宽 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:42:38+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 您添加的每一行都落在 Bootstrap 网格上：十二条等宽轨道由各列共享。1/3 + 2/3 的布局给一列四条轨道，另一列八条。请用本页规划加起来正好的宽度，并为一行给小屏幕准备第二套布局。添加行本身，请参阅 添加行。 该视频给四列的行做平板第二布局，再收窄窗口。 tags: - 'Design guides' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '在 12 列网格上规划列宽' description: |- 您添加的每一行都落在 Bootstrap 网格上：十二条等宽轨道由各列共享。1/3 + 2/3 的布局给一列四条轨道，另一列八条。请用本页规划加起来正好的宽度，并为一行给小屏幕准备第二套布局。添加行本身，请参阅 添加行。 该视频给四列的行做平板第二布局，再收窄窗口。 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:38+0000' dateModified: '2026-10-24T17:19:22+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/bootstrap-grid' articleSection: 设计指南 - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/design/bootstrap-grid' description: |- 您添加的每一行都落在 Bootstrap 网格上：十二条等宽轨道由各列共享。1/3 + 2/3 的布局给一列四条轨道，另一列八条。请用本页规划加起来正好的宽度，并为一行给小屏幕准备第二套布局。添加行本身，请参阅 添加行。 该视频给四列的行做平板第二布局，再收窄窗口。 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 --- [帮助中心](/zh-hans/node/75)/[文档](/zh-hans/hc/documentation) /[学习 DXPR Builder](/zh-hans/hc/documentation/learn-dxpr-builder) /[搭建页面](/zh-hans/hc/documentation/learn-dxpr-builder/build) /[设置元素样式](/zh-hans/hc/documentation/learn-dxpr-builder/element-settings) /[设计指南](/zh-hans/hc/documentation/learn-dxpr-builder/design/overview) # 在 12 列网格上规划列宽. 学习 DXPR Builder搭建页面设置元素样式设计指南 ## 本指南内容 相关指南 - [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns) - [让布局适配手机](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design) - [添加嵌套布局](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting) 您添加的每一行都落在 Bootstrap 网格上：十二条等宽轨道由各列共享。1/3 + 2/3 的布局给一列四条轨道，另一列八条。请用本页规划加起来正好的宽度，并为一行给小屏幕准备第二套布局。添加行本身，请参阅 [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)。 该视频给四列的行做平板第二布局，再收窄窗口。 ## 比例如何变成轨道 | 比例 | 轨道 | 典型用途 | |---|---|---| | 1/1 | 12 | 一列全宽 | | 1/2 | 6 | 两列等宽 | | 1/3 | 4 | 三列等宽，或 2/3 旁的侧栏 | | 2/3 | 8 | 1/3 侧栏旁的主内容 | | 1/4 | 3 | 四列等宽，或 3/4 旁的侧栏 | | 3/4 | 9 | 1/4 侧栏旁的主内容 | | 1/6 | 2 | 六个小列，例如一排标志 | | 5/12 和 7/12 | 5 和 7 | 两列宽度接近 | 一行的轨道加起来为 12。超出时，多出的列换到新行。请用能算出整数轨道的比例：二分之一、三分之一、四分之一、六分之一和十二分之一。1/5 这样的比例没有对应的 Bootstrap 类。 列中的行将该列再分为自己的十二条轨道。请参阅 [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)。 ## 给行做平板第二布局 新行选择的布局从 **Medium devices (≥ 768px)** 起适用。低于该宽度，列堆叠。以下步骤让四列在桌面端保持，在平板上每行显示两列。 1. 悬停行，点击其控制栏中的网格图标。布局对话框打开在 **Medium devices (≥ 768px)** 面板。 2. 选择四列等宽的磁贴。 3. 点击 **Add screen size**。第二面板打开，带有布局副本。 4. 在新面板的屏幕尺寸列表中选择 **Small devices (≥ 576px)**。 5. 点击 **Custom Layout**，输入 `1/2 + 1/2 + 1/2 + 1/2` 并点击 **Save**。 6. 点击工具栏上的 **Save**。 四个二分之一保留全部四列，每行放两列。选两列的磁贴反而会把行减为两列。 ## 您会看到的内容 宽屏上该行四列并排。浏览器窗口窄于 768 像素时，换为每行两列。低于 576 像素，每列占满全宽。 ## 屏幕尺寸 布局对话框中的每个面板设置一个屏幕尺寸的列。该布局对更大屏幕同样有效，直到有自己面板的下一个尺寸。 | 面板 | 起始宽度 | |---|---| | **Extra small (< 576px)** | 最小的手机起 | | **Small devices (≥ 576px)** | 576 像素 | | **Medium devices (≥ 768px)** | 768 像素；新行的第一个面板 | | **Large devices (≥ 992px)** | 992 像素 | | **Extra large (≥ 1200px)** | 1200 像素 | | **Extra extra large (≥ 1400px)** | 1400 像素 | **Remove screen size** 删除面板及其布局。**Custom Layout** 接受任意比例列表，例如 `1/4 + 1/2 + 1/4`。当某面板的布局不是磁贴之一时，对话框标记 **Custom Layout** 并在其上写明布局，例如 **Custom Layout (1/2 + 1/2 + 1/2 + 1/2)**。点击它可在自定义布局框中编辑该布局。 ## 您网站上的 Bootstrap 网格需要页面上有 Bootstrap 5。网站管理员在 **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`) 的 **Bootstrap** 下选择来源。**Sideload Bootstrap files** 提供 **Bootstrap 5**（构建器自己加载）或 **None (theme provides Bootstrap)**。 ## 如果您看不到布局 - **列在所有屏幕尺寸下都堆叠。** 没有加载 Bootstrap：设置为 **None (theme provides Bootstrap)** 而主题没有加载。请选择 **Bootstrap 5**（在 **Sideload Bootstrap files** 下，`/admin/dxpr_studio/dxpr_builder/settings`）。 - **桌面布局丢了列。** 您为另一屏幕尺寸选了列更少的磁贴，构建器把等宽布局同步减少了。请按 [撤销和重做](/zh-hans/hc/documentation/learn-dxpr-builder/editing/undo-redo) 所述撤销改动，用 **Custom Layout** 每列写一个比例。 - **最后一列掉到新行。** 比例加起来超过一行的 12 条轨道。请让它们加起来为 1，例如 `1/4 + 3/4`。 - **自定义列没有明确宽度。** 其比例（如 1/5）没有 Bootstrap 类。请用二分之一、三分之一、四分之一、六分之一或十二分之一。 ## 接下来做什么？ - [添加行](/zh-hans/hc/documentation/learn-dxpr-builder/layout/rows-and-columns)：添加行并选择列预设。 - [响应式设计](/zh-hans/hc/documentation/learn-dxpr-builder/design/responsive-design)：在手机、平板或桌面上显示或隐藏元素。 - [嵌套](/zh-hans/hc/documentation/learn-dxpr-builder/layout/nesting)：在列中放行，做更细的布局。