我也注意到了这个问题(可以在文档页面上重现：https://getbootstrap.com/docs/5.3/components/buttons/#outline-buttons)。我希望轮廓按钮的激活背景颜色与非轮廓按钮相同。

相关文章：https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/
阅读这篇文章后，我将我的解决方法更改为：

.btn-outline-calculator {
  @include button-outline-variant($gray-100);
}
.btn-outline-calculator:hover {
  background-color: shade-color($gray-100, 15%);
}
@media (hover: none) {
  .btn-outline-calculator:hover {
    color: $gray-100;
    background-color: transparent;
  }
  .btn-outline-calculator.active:hover {
    color: #000;
    background-color: $gray-100;
  }
}

现在它的表现完全符合我的预期，适用于桌面和移动设备：

• 活动状态是灰色背景，黑色文本
• 非活动状态是透明背景，带有文本
• 悬停效果类似于活动状态，但阴影效果为15%

而移动设备上的效果如下：

• 活动状态是灰色背景，黑色文本
• 非活动状态是透明背景，带有文本
• 悬停效果与活动/非活动状态相同，且不会干扰(基本上禁用了悬停效果)