內容簡介
如果你需要使用 CSS3 在網站上建立兩、三或多個欄位的文字或圖像，且需要它們完全相同，那麼這個 WordPress 外掛就是你需要的。
首先插入一個 [row] 短代碼（這需要包含每一個新欄位），然後按數字，直到你增加的短代碼總和為 12。
例如 –
[row]
[p-col-3]
這裡是內容
[/p-col-3]
[p-col-3]
這裡是內容
[/p-col-3]
[p-col-3]
這裡是內容
[/p-col-3]
[p-col-3]
這裡是內容
[/p-col-3]
[/row]
這些欄位將會在行動裝置上折疊。
你可以隨意在佈景主題樣式表中覆寫 CSS。
注意
這使用 CSS 中的 box-sizing:border-box，如果你的佈景主題沒有使用，可能會在你的佈景主題中發現輕微變化。
如果你需要使用它，你需要調整你的佈景主題 CSS。
基本上你可能會發現你的 DIVs 寬度會減少，這只需要在這些 DIVs 中添加一些寬度即可解決。
box-sizing:border-box 的作用是設置寬度，例如：
如果你的 DIV 寬度設置為 100px，你添加 padding-left:5px; border-left:1px solid;，這個 padding 和 border 將添加到 DIV 內，而不影響寬度。如未使用這個，其寬度將擴大到總共 106px。
外掛標籤
開發者團隊
原文外掛簡介
If you need two, three or more columns of text or images and need them to be exactly the same using on CSS3 then this is it.
First insert a [row] shortcode (this needs to wrap around every new row) then click the numbers until you have added shortcodes that add up to 12.
Example –
[row]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[p-col-3]
Content Here
[/p-col-3]
[/row]
These rows will collapse for mobile devices.
Feel free to over write the css in your themes style sheet.
NOTE
This uses box-sizing:border-box in the css you may notice a slight change in your theme if not already using this.
If you do you will need to adjust your themes css.
Basically you may find you lose width in your DIVs, it should be just an easy matter of adding some width to these DIVs.
What box-sizing:border-box does is set your width, for example:
If your DIV was set to a width of 100px and you added padding-left:5px; border-left:1px solid; this padding and border will be added inside the DIV in turn not effecting the 100px width. With out this in the css 100px width would be expanded to a total of 106px.
