为什么 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 导入顺序可以保持不变)。

为什么会这样呢,希望有大佬能说说。我只是希望,这能帮助像我一样拔头发的人。