如何在古腾堡制作2/3宽度的柱子

时间：2020-01-05 作者：javaandy

我创建了一个2列布局块，给了columns块一个CSS类.first-col-2-3

并将此CSS添加到我的主题中：

.first-col-2-3 > div:nth-child(1) {background:red;width:67%!important;}

.first-col-2-3:nth-child(2) {width:33%!important;}
结果是列保持50%/50%的宽度。

但第一个确实有红色背景。

因此，正确的列是有目标的，但width属性没有改变，使这两个列分别为67%和33%。

如何更改列宽？

我看到了一种向每列中的段落添加CSS类的方法，但这也行不通。有什么想法/解决方案吗？非常感谢。

1 个回复
最合适的回答,由SO网友:Tom J Nowell 整理而成

可以使用UI在块编辑器中添加2列块布局，其中1个块占2/3。添加CSS类来实现这一点是非常不寻常和不必要的

添加列块时，它会询问您：

enter image description here

导致柱块间距为三分之一：

enter image description here

每个块在块设置中都有一个百分比宽度：

enter image description here

如果您想使用主题中的CSS类，您有几个选项：

构建自定义列块，将CSS类添加到列块中，完全覆盖或删除块CSS，并添加自己的CSS。似乎您尝试了后一种方法，但遇到了一个百分之百纯CSS的问题，CSS问题最好在stackoverflow上问（它们在WPSE上不是主题，因为它们不是WordPress问题）

标签： block-editor   columns   小码农  

相关推荐

custom user table columns

我正在这样做，根据我阅读的所有文档，应该覆盖manage users表中的每一列值。由于某些原因，WP 4.1中不起作用。任何见解都值得赞赏。function retro_custom_users_table_content($value, $column_name, $user_id){ $value = \"hi\"; return $value; } add_filter(\'manage_users_custom_column\',\'retro_c