bootstrap-select 默认样式似乎不正确
bootstrap-select default styling seems incorrect
我正在使用很棒的 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"。另外:如何为正在消失的断点上的选项添加填充?
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 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"。另外:如何为正在消失的断点上的选项添加填充?
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;
}
}