为什么 jQuery UI 微调箭头按钮没有显示?
Why are the jQuery UI Spinner arrow buttons not showing?
实施 jQuery UI Spinner Widget 的最简单样板版本后,向上和向下箭头按钮未显示。单击它们应该出现的位置会触发 Spinner 事件并将数字设为 increment/decrement,但看不到任何按钮。
我在 SO 上发现了一些相关的(无用的)问题(更多 here and less here) and one on the jQuery Forums (here)。最后一个线程提到了可能的 Bootstrap 冲突。
我在我的项目中同时使用 Bootstrap 和 jQuery (UI)。
样本HTML
<input id="spinner" name="spinner">
和JavaScript
$( "#spinner" ).spinner({
min: 0,
step: 100000,
});
没有什么特别的,尽管显然除此之外还有一些习俗 CSS。
尝试使用 jQuery UI 提供的 CSS 类 设置样式没有帮助。做类似
的事情
.ui-spinner-button {
color: white !important;
background: black;
}
确实将按钮的背景变成黑色,但箭头仍然不可见。
TL;DR
如果您遇到此问题并且同时使用 Bootstrap (v4) 和 jQuery (v1.12),请尝试调换顺序,其中它们的 JavaScript (not CSS, 奇怪, 好像) 被加载了, 具体来说 有 jQuery 被加载在 Bootstrap.
之后
注意事项
这可能会也可能不会导致 jQuery 干扰 Bootstrap 功能的问题。虽然,到目前为止,我没有遇到过这样的问题。
为什么?
在浏览器中进行一些挖掘和检查后,我发现 Bootstrap 将一种样式应用于按钮元素(<a>
-标签),即以下(来自 _reboot.scss):
a:not([href]) {
color: inherit;
text-decoration: none;
}
这似乎与我试图将不同的 CSS 强加到按钮上的尝试混淆了。
上面提到的 jQuery 论坛中的帖子发布者也发现 Bootstrap 是问题所在,所以我尝试弄乱导入命令。奇怪的是,在 Bootstrap CSS 之后加载 jQuery UI CSS 没有任何改变。当我切换 JavaScript 导入时它起作用了(CSS 导入顺序可以保持不变)。
为什么会这样呢,希望有大佬能说说。我只是希望,这能帮助像我一样拔头发的人。
实施 jQuery UI Spinner Widget 的最简单样板版本后,向上和向下箭头按钮未显示。单击它们应该出现的位置会触发 Spinner 事件并将数字设为 increment/decrement,但看不到任何按钮。
我在 SO 上发现了一些相关的(无用的)问题(更多 here and less here) and one on the jQuery Forums (here)。最后一个线程提到了可能的 Bootstrap 冲突。
我在我的项目中同时使用 Bootstrap 和 jQuery (UI)。
样本HTML
<input id="spinner" name="spinner">
和JavaScript
$( "#spinner" ).spinner({
min: 0,
step: 100000,
});
没有什么特别的,尽管显然除此之外还有一些习俗 CSS。
尝试使用 jQuery UI 提供的 CSS 类 设置样式没有帮助。做类似
的事情.ui-spinner-button {
color: white !important;
background: black;
}
确实将按钮的背景变成黑色,但箭头仍然不可见。
TL;DR
如果您遇到此问题并且同时使用 Bootstrap (v4) 和 jQuery (v1.12),请尝试调换顺序,其中它们的 JavaScript (not CSS, 奇怪, 好像) 被加载了, 具体来说 有 jQuery 被加载在 Bootstrap.
之后注意事项
这可能会也可能不会导致 jQuery 干扰 Bootstrap 功能的问题。虽然,到目前为止,我没有遇到过这样的问题。
为什么?
在浏览器中进行一些挖掘和检查后,我发现 Bootstrap 将一种样式应用于按钮元素(<a>
-标签),即以下(来自 _reboot.scss):
a:not([href]) {
color: inherit;
text-decoration: none;
}
这似乎与我试图将不同的 CSS 强加到按钮上的尝试混淆了。
上面提到的 jQuery 论坛中的帖子发布者也发现 Bootstrap 是问题所在,所以我尝试弄乱导入命令。奇怪的是,在 Bootstrap CSS 之后加载 jQuery UI CSS 没有任何改变。当我切换 JavaScript 导入时它起作用了(CSS 导入顺序可以保持不变)。
为什么会这样呢,希望有大佬能说说。我只是希望,这能帮助像我一样拔头发的人。