bootstrap-select 默认样式似乎不正确

Question

我正在使用很棒的 bootstrap-select jQuery 插件，但是出现了两种奇怪的默认样式。将相关 CSS 和 JS 文件加载到我的网站后，这是我所有 select 框的默认样式（根本没有使用任何属性更新我的 select 框） .

环境

WordPress：5.2.2
主题：WP Bootstrap Starter

两个奇怪的地方:

我所有的 select 盒子上似乎都有 bootstrap btn-danger class。我不知道为什么它有这个而不是 btn-default class.
在某个断点处，选项的填充消失（如显示的那样，与边框齐平）。

排队javascript和css的代码：

function my_scripts() {
  wp_register_style( 'bootstrap-select-css-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css' );
  wp_enqueue_style('bootstrap-select-css-cdn');

  wp_register_script( 'bootstrap-select-js-cdn', 'https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js', null, null, true );
  wp_enqueue_script('bootstrap-select-js-cdn');
}
add_action('wp_enqueue_scripts', 'my_scripts');

为了完整性这是我的 select 框代码：

<div class="form-group col-sm-3">
  <label for='order'>Order:</label><br>
  <select name='order' id='order' class="form-control">
    <option value='ASC'>ASC</option>
    <option value='DESC'>DESC</option>
  </select>
</div>

当我在浏览器中检查标记时，显示如下：

所以两个问题：

为什么会这样？我非常怀疑这是默认行为。
我该如何解决这个问题？我怎样才能使站点范围内的 select 框成为 "btn-default" 而不是 "btn-danger"。另外：如何为正在消失的断点上的选项添加填充？

Answer 1

bootstrap-select 应用了 btn-light class。问题是 WP Bootstrap Starter Theme 的 btn-light class 样式似乎以一种意想不到的方式出现。

我发现解决此问题的最简单、侵入性最小的方法是在 bootstrap-select js 文件中执行 find/replace：找到文本 btn-light 的所有实例并将其替换为btn-default。目前js文件中只引用了一个btn-light class的实例，所以很简单。

为了修复填充，我找到了填充消失的断点并添加了一条规则以将其添加回：

@media only screen and (max-width: 991px) {
  .dropdown-menu.inner.show{
    padding: 10px;
  }
}

bootstrap-select 默认样式似乎不正确

bootstrap-select default styling seems incorrect

jquery

css

wordpress

bootstrap-select