html - 为什么 jQuery UI Spinner 箭头按钮不显示？

Question

在实现最简单的 jQuery UI 样板版本之后 Spinner Widget ，向上和向下箭头按钮未显示。单击它们应该出现的位置会触发 Spinner 事件并且数字会递增/递减，但没有按钮可见。

我在 SO(更多 here 和更少 here)和 jQuery 论坛(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;
}

确实将按钮的背景变黑了，但箭头仍然不可见。

Answer 1

长话短说

如果您遇到此问题并且同时使用 Bootstrap (v4) 和 jQuery (v1.12)，请尝试调换顺序，将它们的 JavaScript(不是 CSS，看起来很奇怪)被加载，特别是在 Bootstrap 之后加载 jQuery。

注意事项

这可能会也可能不会导致 jQuery 干扰 Bootstrap 功能的问题。尽管到目前为止，我没有遇到过这样的问题。

为什么？

在浏览器中进行一些挖掘和检查后，我发现 Bootstrap 将一种样式应用于按钮元素( <a> -tags)，即以下(来自 _reboot.scss):

a:not([href]) {
    color: inherit;
    text-decoration: none;
}

这似乎与我在按钮上强制使用不同 CSS 的尝试混淆了。

上面提到的 jQuery 论坛中的帖子发布者也发现 Bootstrap 是问题所在，所以我尝试弄乱导入命令。奇怪的是，在 Bootstrap CSS 之后加载 jQuery UI CSS 没有任何改变。当我切换 JavaScript 导入时它起作用了(CSS 导入顺序可以保持不变)。

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