为什么 bootstrap 会破坏 WordPress 管理？

Question

考虑以下 WordPress 插件代码：

<?php
/**
 * Plugin Name: test
 * Description: This plugin is just a test for bootstrap css
 * Version: 1.0.0
 * Author: Gavin Simpson
 * License: GPL2
*/

class testclass
{
    private static $instance;
    public static function get_instance_advert() 
    {
        if( null == self::$instance )
        {
            self::$instance = new testclass();
        }
        return self::$instance;
    }

    private function __construct()
    {
        add_action( 'admin_enqueue_scripts', array($this,'inistyleheets'));
    }
    function inistyleheets()
    {
        wp_register_style( 'mybootstrap', plugins_url() . '/test/assets/bootstrap-3.3.5-dist/css/bootstrap.min.css');   
        wp_enqueue_style('mybootstrap');
    }
}
add_action( 'plugins_loaded', array( 'testclass', 'get_instance_advert'));
?>

激活上述内容后，Wordpress 管理中的“屏幕选项”按钮将停止工作。

问题 100% 与仅加载 Bootstrap css 有关，因此该示例不会加载 bootstrap 本身。在我的生产代码中，引导程序工作得很好，它只是破坏了所描述的“屏幕选项”按钮，就像上面的基本插件代码一样。

我已经尝试了所有的基本主题，即二十四、二十五和二十六。他们中的任何一个都没有运气，结果都一样。

Answer 1

冗长的解决方案，所以这里不再重复，但链接是 https://rushfrisby.com/using-bootstrap-in-wordpress-admin-panel。 （是的，我知道发布链接并不酷，但我不想复制并粘贴别人的解决方案）

最重要的是，您需要包装您可能想要添加 Bootstrap CSS 的任何代码，上面链接中的解决方案负责以一种非常有效的方式加载 Bootstrap。

更新 该链接现在是 404，所以这个答案毫无用处。

Answer 2

对于“屏幕选项”按钮不起作用的情况（可能还有其他一些情况），您可以尝试使用

.hidden[style*='display: block'] {
    display:block !important;
}

在引导后加载的一些 CSS 中。有限的测试表明该按钮现在可以工作，但由于 Bootstrap 样式的原因，下拉列表的内容看起来确实有所不同。因此，我将引导程序的排队限制为仅在我真正需要的管理屏幕上使用。我不确定尝试修复该元素的样式对我来说是否值得。

Answer 3

我发现问题在于屏幕选项面板中控件上的类名，wordpress

load-options css

包含一个针对具有“隐藏”类的元素的条目，并设置“

display: none

”以确保这些元素不显示最初。

当您单击“屏幕选项”按钮时，它会触发一个 javascript 函数，该函数应该使该面板出现，因为它使用“display: block”在这些元素上设置样式属性，这应该覆盖 css 语句。

但是 bootstrap css 也有一个 css 语句，该语句以类名“hidden”为目标，但包含“display: none !important”，“!important”会导致 bootstrap css 语句继续覆盖在元素本身。所以一个肮脏的解决方案是从 bootstrap css 中删除 !important 部分。