在 WordPress 主题中添加引导程序似乎会覆盖导航样式答案

【问题标题】：Adding bootstrap in WordPress theme seems to override nav styles在 WordPress 主题中添加引导程序似乎会覆盖导航样式
【发布时间】：2016-10-13 02:00:34
【问题描述】：

我在网站上使用 Divi 子主题。我添加了 Bootstrap 来创建联系表格。但是，一旦我使用 wp_enqueue_style 和 wp_enqueue_script 将样式和脚本排入队列，顶部导航就会在悬停时获得一些额外的填充和背景颜色。

您可以通过加载 live site 和 dev site 并比较它们来查看差异。

这是我在子主题的functions.php 文件中的排队代码。当我运行它并查看源代码时，它似乎将主 style.css 放在引导 css 之后，我理解这是确保 style.css 在这里具有特异性所必需的。我错过了什么？

// Enqueue Bootstrap for modal popup contact form
function wpbootstrap_scripts_with_jquery()
{
    wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js' );
    wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
}

add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

// BEGIN ENQUEUE PARENT ACTION
// AUTO GENERATED - Do not modify or remove comment markers above or below:

if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
    function chld_thm_cfg_parent_css() {
        wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array(  ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css' );

if ( !function_exists( 'child_theme_configurator_css' ) ):
    function child_theme_configurator_css() {
        wp_enqueue_style( 'chld_thm_cfg_separate', trailingslashit( get_stylesheet_directory_uri() ) . 'ctc-style.css', array( 'chld_thm_cfg_parent','divi-style','et-shortcodes-css','et-shortcodes-responsive-css','magnific-popup' ) );
    }
endif;
add_action( 'wp_enqueue_scripts', 'child_theme_configurator_css' );

// END ENQUEUE PARENT ACTION

【问题讨论】：

看起来您可能有匹配的课程，但只有一个课程获胜。要解决这个问题 - 选项 [1] - 在 CSS 属性中添加 (!mportant) 到您不想更改的那些，以便它们优先于那些弄乱样式的那些。例如 (color: blue !important) -- 这意味着您需要检查浏览器上的 css 代码以查看元素中划掉了哪些 CSS，编辑 css 文件并在每个文件中添加 (!important) -- 选项 [ 2] 删除优先于其他 CSS 文件的 CSS 可能是安全的，但如果你不知道发生了什么，我会继续使用选项 1
查看这里了解更多信息 -- css-tricks.com/when-using-important-is-the-right-choice
最后一件事——你需要下载 bootstrap css 的未压缩版本并修改它——maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css——你可以稍后在线完成后将其压缩。 cssminifier.com
如果我下载未压缩的版本以便我可以修改它，那么我是否需要仅将其作为本地副本而不是通过 CDN 排队？
它不是那样工作的。 CDN 在那里，因此服务器始终处于运行状态，因此您可以 100% 保证文件会下载。一旦您下载了 css 本地或 cdn 文件，下次它将从浏览器缓存中获取它们，因此速度更快。如果您删除缓存，那么它将再次重新加载它们。你还有一个选择。如果您可以在您的页面中使用 (

标签： jquery html css wordpress twitter-bootstrap

【解决方案1】：

我最近才遇到这种情况，我发现：

必须使用wp_enqueue_scripts添加脚本
密切关注wp_enqueue_scripts 的版本。
wp_enqueue_style 的版本高于常规脚本。请注意下面代码中的1.0.3。

我的完整工作代码没有被其他类覆盖

function wp_enquene_bulma_css() {
    wp_enqueue_style( 'bulma', '/wp-content/themes/twentyseventeen-child/css/bulma.min.css', false, '1.0.3', 'all' );
}

add_action('wp_enqueue_scripts', 'wp_enquene_bulma_css');

【讨论】：