在 12 列网格上规划列宽.
您添加的每一行都落在 Bootstrap 网格上：十二条等宽轨道由各列共享。1/3 + 2/3 的布局给一列四条轨道，另一列八条。请用本页规划加起来正好的宽度，并为一行给小屏幕准备第二套布局。添加行本身，请参阅 添加行。
该视频给四列的行做平板第二布局，再收窄窗口。
比例如何变成轨道
| 比例 | 轨道 | 典型用途 |
|---|---|---|
| 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 类。
列中的行将该列再分为自己的十二条轨道。请参阅 嵌套。
给行做平板第二布局
新行选择的布局从 Medium devices (≥ 768px) 起适用。低于该宽度，列堆叠。以下步骤让四列在桌面端保持，在平板上每行显示两列。
- 悬停行，点击其控制栏中的网格图标。布局对话框打开在 Medium devices (≥ 768px) 面板。
- 选择四列等宽的磁贴。
- 点击 Add screen size。第二面板打开，带有布局副本。
- 在新面板的屏幕尺寸列表中选择 Small devices (≥ 576px)。
- 点击 Custom Layout，输入
1/2 + 1/2 + 1/2 + 1/2并点击 Save。 - 点击工具栏上的 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）。 - 桌面布局丢了列。 您为另一屏幕尺寸选了列更少的磁贴，构建器把等宽布局同步减少了。请按 撤销和重做 所述撤销改动，用 Custom Layout 每列写一个比例。
- 最后一列掉到新行。 比例加起来超过一行的 12 条轨道。请让它们加起来为 1，例如
1/4 + 3/4。 - 自定义列没有明确宽度。 其比例（如 1/5）没有 Bootstrap 类。请用二分之一、三分之一、四分之一、六分之一或十二分之一。