如何在古腾堡制作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问题)

相关推荐

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