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

Question

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

环境

• WordPress:5.2.2
• 主题:WP Bootstrap Starter

两个奇怪的地方:

• 我的所有选择框似乎都有 Bootstrap btn-danger 类。我不知道为什么它有这个而不是 btn-default 类。
• 在某个断点处，选项的填充消失(如显示的那样，与边框齐平)。

将 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');

为了完整性这是我的选择框代码:

<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>

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

所以两个问题:

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

Answer 1

发生的事情是 bootstrap-select 应用 btn-light 类。问题是 WP Bootstrap Starter Theme 似乎以一种意想不到的方式设置了 btn-light 类的样式。

我发现解决此问题的最简单、侵入性最小的方法是在 bootstrap-select js 文件中执行查找/替换:查找文本 btn-light 的所有实例并将其替换为 btn-default。截至目前，js 文件中仅引用了一个 btn-light 类实例，因此非常容易。

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

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