可以在Wordpress中编辑这些HTML标签吗？

Question

我正在编辑一个使用 Wordpress 和模板创建的网站，看起来某些功能已被锁定，因此您必须购买 Elementor 构建器。到目前为止，我已经成功使用额外的 CSS 和 Elementor 演示编辑了我想要更改的所有内容。

问题是，有一个特定的事情我无法更改，除非我修改 HTML 标签（我猜是因为 Bootstrap）使列的宽度为容器的一半。你知道吗，col-lg-6、col-xl-6等那种

显然，使用 Chrome 浏览器我可以将这些标签更改为我想要的标签（col-lg-12 等），但这只是暂时的。我不知道是否可以以某种方式更改这些标签。有什么想法吗？

我将在此处留下屏幕截图，以便您可以看到我正在谈论的标签。非常感谢，希望你能帮助我！

Answer 1

在 Bootstrap 中，

col

最多可以为 12。 12 列宽度是最大数量，这将是父级的完整宽度。您的代码显示 col 在 xxl（超特大屏幕）上为 5 宽，在 lg（大）屏幕上为 6 宽，在 md（中）屏幕上为 8 宽。要获得全宽度，请指定

col-12

并删除其余部分。它将在所有屏幕上显示为全宽。

col-12

^ 此栏在所有屏幕上始终为 12 宽

col-sm-12 col-md-10 col-lg-8 col-xl-7

^ 这是一列，但宽度不同，具体取决于小、中、大或超大屏幕尺寸，在我的示例中，12 是小屏幕的全宽度。这是很有规律的。您可以拥有

col-sm-11

或

 col-sm-10

，这取决于您想要它的外观。

使用上面的代码，随着屏幕尺寸变大，列会变得更细一些。这与眼睛和看起来不错的东西有一定关系，所以不要混淆。

col-7

在非常大的屏幕上看起来相当大，有足够的空间来提供很棒的背景。

Answer 2

在 WordPress 中，当您处理 Elementor 等模板和页面构建器时，HTML 结构通常是动态生成的，因此很难通过 WordPress 管理界面直接编辑 HTML 标签。

但是，有几种方法可以实现所需的列宽，而无需直接编辑 HTML 标签：

1. 使用自定义CSS： 您可以通过向 WordPress 主题添加自定义 CSS 来覆盖 Bootstrap 类。这样，您可以在删除另一列后强制剩余的列占据整个宽度。具体方法如下：

CSS：

.col-lg-6 {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 100% !important;

}

} 此 CSS 规则强制任何 col-lg-6 的行为就像 col-lg-12 一样，占据父容器的整个宽度。

2. 编辑模板文件： 如果您有权访问 WordPress 主题文件（通过子主题或自定义插件），您可以找到负责呈现您想要更改的特定部分的模板文件。

第 1 步：转到您的主题文件夹 (wp-content/themes/your-theme/)。 步骤 2：找到模板文件（通常命名为 page.php、single.php 或位于 /template-parts/ 等文件夹中）。 步骤 3：找到定义列的 HTML 结构，并将类从 col-lg-6 修改为 col-lg-12。 3. 使用 Elementor 的自定义 HTML 小部件： 如果您正在编辑的部分被锁定在 Elementor Pro 后面，您可以尝试使用免费版本的自定义 HTML 小部件来重新创建您想要的结构。

第 1 步：在 Elementor 中添加新部分。 步骤 2：使用“HTML”小部件使用 col-lg-12 编写您自己的 Bootstrap 网格系统。 步骤 3：根据需要自定义 CSS。 4.使用子主题覆盖样式： 如果您经常需要覆盖样式和 HTML 结构，请考虑创建子主题。这将允许您进行修改而不影响父主题的文件，这在更新主题时特别有用。

第 1 步：创建子主题（如果还没有）。 步骤 2：将必要的模板文件从父主题复制到子主题并在其中进行更改。 第 3 步：自定义 CSS 以反映您所需的布局。 概括： 不幸的是，除非您有权访问主题文件，否则您无法直接在 WordPress 的标准编辑器中编辑 HTML 标签。最好的选择是使用自定义 CSS 覆盖列宽或直接通过子主题或自定义插件编辑模板文件。如果您使用 Elementor，请尝试使用 HTML 小部件重新创建结构（如果可能）。