gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:41:32 24 4
gpt4 key购买 nike

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

default styling

环境

两个奇怪的地方:

  • 我的所有选择框似乎都有 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>

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

markup

所以两个问题:

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

最佳答案

发生的事情是 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;
}
}

关于jquery - bootstrap-select 默认样式似乎不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57016279/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com