Wordpress模板搭建的站点能否修改HTML标签调整列宽？

方案1：CSS强制覆盖（最推荐，无需修改HTML） #

你不需要改动原有HTML标签，直接通过更高优先级的CSS覆盖Bootstrap的默认样式即可，修改直接在WordPress后台「外观」-「自定义」-「额外CSS」中添加就能永久生效：

/* 适配lg及以上屏幕尺寸 */
@media (min-width: 992px) {
  /* 此处可补充更精确的外层选择器，避免影响全站其他列 */
  .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}
/* 适配xl及以上屏幕尺寸 */
@media (min-width: 1200px) {
  /* 此处可补充更精确的外层选择器，避免影响全站其他列 */
  .col-xl-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

如果只需要修改特定页面的列，可以先在浏览器控制台找到目标列的外层父容器唯一类名/ID，加到选择器前缩小生效范围即可。

方案2：PHP钩子替换输出HTML类名 #

如果需要彻底修改输出的HTML标签类名，可以将以下代码添加到当前主题的functions.php文件中（建议使用子主题修改，避免主题更新覆盖自定义代码）：

add_filter('the_content', 'replace_bootstrap_col_class', 999);
function replace_bootstrap_col_class($content) {
    // 仅在指定页面生效的话可以打开下方注释，替换数字为对应页面ID
    // if (!is_page(123)) return $content;
    $content = str_replace(['col-lg-6', 'col-xl-6'], ['col-lg-12', 'col-xl-12'], $content);
    return $content;
}

这段代码会在页面渲染时自动替换对应类名，前端输出的HTML会直接显示修改后的类。

方案3：JS动态修改类名 #

如果不方便改PHP代码，也可以通过前端JS实现永久修改，将以下代码添加到主题设置的「自定义JS」区块中即可：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.col-lg-6.col-xl-6').forEach(col => {
    col.classList.replace('col-lg-6', 'col-lg-12');
    col.classList.replace('col-xl-6', 'col-xl-12');
  });
});

内容的提问来源于stack exchange，提问作者Pablo G.