可以在选择器内使引导css“上下文化”，即引导样式在该选择器内工作，这要归功于css specificity rules, 在那里，他们凌驾于其他规则之上。

如何操作：

首先，无需下载引导程序。假设这些文件位于\'bootstrap/less\' 文件夹

现在创建一个新的less文件，假设my-bootstrap.less.

在此文件中放置

#my-widget-container .my-widget {
    @import \'bootstrap/less/bootstrap.less\';
}

编译这个较少的文件，假设您获得了一个文件my-bootstrap.css. 如果打开此文件，您将看到它是完整的引导环境，但每个规则的前缀都是\'#my-widget-container .my-widget\'.

此时，您可以完全删除引导较少的文件，也可以删除较少的文件，并且只保留此文件my_bootstrap.css 文件（如果最小化，效果更好），然后您可以将该文件排队，而不是将原始引导程序排队，这样您就不会遇到不使用引导程序的主题的问题。

但是，如果主题是基于引导的，则css文件是多余的，因此只有在不存在引导的情况下，才应将其排队：

function __construct() {
    // your stuff here
    add_action(
      \'wp_enqueue_scripts\',
      array( $this, \'register_plugin_styles\' ),
      PHP_INT_MAX // highest priority
    );
}

public function register_plugin_styles() {

  global $wp_styles;

  $s = array_map( \'basename\', wp_list_pluck($wp_styles->registered, \'src\') );

  if ( ! in_array(\'bootstrap.css\', $s ) && ! in_array( \'bootstrap.min.css\', $s )  ) {
    // no one has registered bootstrap, let\'s register your \'my-bootstrap\'
    wp_enqueue_style(
      \'my-bootstrap\', get_template_directory_uri() . \'/my-bootstrap.css\'
    );
  }  

}

现在你要做的就是用

<div id="my-widget-container">
  <div class="my-widget">

   YOUR WIDGET CONTENT GOES HERE

  </div>
</div>

如何将较少的文件编译成css文件超出了本回答和本网站的范围，如果您需要，简单的谷歌搜索将为您提供任何指导