Bootstrap模态框H4标题无法居中，JSFiddle正常WP中异常求助

我碰到过不少WordPress+Bootstrap项目里出现这种样式不生效的情况，大概率是CSS优先级冲突或者资源加载顺序的问题，给你几个排查和解决的思路：

1. 检查CSS优先级被覆盖的情况 #

WordPress的主题或第三方插件经常会有全局的CSS规则，可能会覆盖Bootstrap的text-center类样式。你可以通过浏览器开发者工具（按F12打开），选中模态框里的<h4>标题，查看Styles面板：

• 找到text-align属性，如果看到它被划掉，说明有更高优先级的CSS规则覆盖了它
• 查看覆盖它的规则来源（比如是主题的style.css，还是某个插件的CSS文件）

针对这种情况，你可以使用更具体的CSS选择器来强制生效，比如在你的自定义CSS里添加：

#exampleModal .modal-header .modal-title.text-center {
    text-align: center;
}

如果还是不行，可以临时用!important来测试（不推荐长期使用，优先优化选择器优先级）：

#exampleModal .modal-header .modal-title.text-center {
    text-align: center !important;
}

2. 确认Bootstrap资源的加载顺序 #

确保Bootstrap的CSS文件是在WordPress主题的CSS之前加载的。如果主题CSS后加载，它的规则会更容易覆盖Bootstrap的样式。你可以在WordPress后台的外观 > 自定义 > 额外CSS里添加上面的自定义样式，这里的CSS会晚于主题和插件CSS加载，优先级更高。

3. 排查第三方插件冲突 #

有些WordPress插件可能会引入其他UI框架（比如Foundation、Semantic UI），或者自定义了text-center类的样式。你可以尝试暂时禁用所有第三方插件，然后刷新页面看标题是否能居中，排查出冲突的插件后，再针对性处理（比如调整插件的CSS，或者替换插件）。

4. 确认Bootstrap是否正确加载 #

有时候可能是Bootstrap没有完全加载成功，你可以在开发者工具的网络面板里，搜索bootstrap.css，确认它的HTTP状态码是200（正常加载），并且版本和你在JSFiddle里使用的版本一致。

内容的提问来源于stack exchange，提问作者ebillis