
內容簡介
使用 FF Block Advanced Columns 外掛,您可以更精確地控制每個欄位在不同斷點時的寬度。此外,此外掛還增強了您可以在文章編輯介面中使用的預設欄位模組:
編輯介面中的每個欄位都被標記為進階欄位,以區別於預設欄位。
您可在編輯介面的側邊欄位中設定每個斷點的欄位寬度。
儲存後,此外掛會在欄位模組及其欄位上新增 CSS 類別,詳細使用方法如下。
欄位寬度
請注意,目前無法在每個斷點中選擇所有選項。
當您儲存頁面或文章時,系統會在每個欄位上加入 CSS 類別,以便您指定每個斷點的寬度。類別名稱如下:
1/12
u-1/12@md 和/或 u-1/12@lg
2/12
u-2/12@md 和/或 u-2/12@lg
3/12
u-3/12@md 和/或 u-3/12@lg
4/12
u-4/12@sm、u-4/12@md和/或 u-4/12@lg
5/12
u-5/12@md 和/或 u-5/12@lg
6/12
u-6/12@xs、u-6/12@sm、u-6/12@md和/或 u-6/12@lg
7/12
u-7/12@md 和/或 u-7/12@lg
8/12
u-8/12@md 和/或 u-8/12@lg
9/12
u-9/12@md 和/或 u-9/12@lg
10/12
u-10/12@md 和/或 u-10/12@lg
11/12
u-11/12@md 和/或 u-11/12@lg
12/12
u-12/12@xs、u-12/12@sm、u-12/12@md和/或 u-12/12@lg
inherit
而不是為對應斷點添加 CSS 類別,這意味著使用前一個斷點的值。舉例來說:在 extra-small、small、medium 和 large 斷點分別選擇 ‘6/12’、‘inherit’、‘3/12’ 和‘inherit’ 時,會將以下 CSS 類別添加到該欄位:u-6/12@xs u-3/12@md。
外掛標籤
開發者團隊
原文外掛簡介
With FF Block Advanced Columns you get more control about the width per breakpoint of each column. The default columns block you can use in the editor is extended as such:
Columns are labelled as an advanced column (in the editor interface only). This label enables you to select the corresponding column.
When you have selected a column, you can set the widths per breakpoint in the sidebar of the editor.
On save, this plugin adds CSS classes to the columns block and its columns. See more about this below.
Column widths
Please note that it currently is not yet possible to select all options for each breakpoint.
When you save your page or post, CSS classes are added to each column that enables you to specify the width per breakpoint. The classnames are as follows:
1/12
u-1/12@md, and/or u-1/12@lg
2/12
u-2/12@md, and/or u-2/12@lg
3/12
u-3/12@md, and/or u-3/12@lg
4/12
u-4/12@sm, u-4/12@md, and/or u-4/12@lg
5/12
u-5/12@md, and/or u-5/12@lg
6/12
u-6/12@xs, u-6/12@sm, u-6/12@md, and/or u-6/12@lg
7/12
u-7/12@md, and/or u-7/12@lg
8/12
u-8/12@md, and/or u-8/12@lg
9/12
u-9/12@md, and/or u-9/12@lg
10/12
u-10/12@md, and/or u-10/12@lg
11/12
u-11/12@md, and/or u-11/12@lg
12/12
u-12/12@xs, u-12/12@sm, u-12/12@md, and/or u-12/12@lg
inherit
Instead of adding a CSS class for the corresponding breakpoint, the same value used for the previous breakpoint is inherited. For example: selecting ‘6/12’, ‘inherit’, ‘3/12’, and ‘inherit’ for the breakpoints extra-small, small, medium and large, respectively, will result in the classes u-6/12@xs u-3/12@md being added to a column.
