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

【问题标题】：bootstrap-select default styling seems incorrectbootstrap-select 默认样式似乎不正确
【发布时间】：2019-07-13 04:58:15
【问题描述】：

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

环境

WordPress：5.2.2
主题：WP Bootstrap Starter

两个怪事：

我的所有选择框似乎都有引导程序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>

当我检查浏览器中的标记时，它会显示以下内容：

那么两个问题：

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

【问题讨论】：

能否提供相关链接？
@MinalChauhan 不幸的是，我没有指向该站点的链接，因为我正在我的计算机上本地开发它。
而不是使用 Dropdown 只是使用 Select ..
嗯，我不太清楚你的意思。我没有在选择框上输入dropdown 类。引导选择代码必须自动添加。

标签： jquery css wordpress bootstrap-select

【解决方案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;
  }
}

【讨论】：