在编辑器组块内创建引导列

时间:2019-12-05 作者:sialfa

根据这个答案,我试图使用wordpress新的默认块编辑器来设置块内容的引导类。我使用组块来设置容器,使用另一个组块来设置引导网格中需要的行。我的问题是如何在将包含列的第二个块组中设置列?如果我使用段落,结果就不是我所期望的,而且我不知道如何在组块内创建列。

如果查看屏幕,可以看到在标记上设置了columns类<p>, 我需要在类中添加两个div。注意:我使用块编辑器的锚字段来设置类,但我改为使用类字段来解决这个问题。

谢谢你的帮助。

enter image description here

1 个回复
最合适的回答,由SO网友:Anthony D 整理而成

在您的.row 容器选择“Columns块”而不是段落块。可以为每个列分配所需的引导CSS类。它将如下所示:

<div class="wp-block-group container">
   <div class="wp-block-group__inner-container">
      <div class="wp-block-group row">
         <div class="wp-block-group__inner-container">
            <div class="wp-block-columns">
               <div class="wp-block-column col-sm-12 col-md-6 col-lg-6">
                  <p>Text Here</p>
               </div>
               <div class="wp-block-column col-sm-12 col-md-6 col-lg-6">
                  <p>More Text</p>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>
默认情况下,“Columns块”已经是一个flex容器,因此在这种情况下,您甚至不需要.row 容器或者你可以.row 类设置为“Columns块”本身。

相关推荐

如何组织插件css文件的优先级?

我正在开发带有主题(Astra Pro with child主题)和插件的网站。当我在Chrome开发工具中检查性能时,跟踪显示了具有高优先级的非关键样式表。示例-lightbox样式表是主要文件之一:是否有办法控制这些优先级,以便我可以先放置关键文件,然后再放置非关键文件?初学者水平的答案将不胜感激。编辑#1:我已经添加了我的子主题函数。php代码:add_action( \'wp_enqueue_scripts\', \'theme_enqueue_styles\', 99 ); functi