移除 Bootstrap 工具提示箭头上方的灰色边框

Posted 2023-03-17

【中文标题】移除 Bootstrap 工具提示箭头上方的灰色边框

【英文标题】：Remove the gray border above the arrow for Bootstrap tooltip

【发布时间】：2018-11-09 21:47:21

【问题描述】：

有谁知道为什么这个细边框出现在我所有的 Bootstrap 工具提示上？我已经搜索和搜索，找不到其他似乎经历过这种情况的人。我们所有的 MVC 项目中都有边框，我们没有以任何方式更改 Bootstrap CSS。我们正在使用 Bootstrap 3.3.7。图像显示了茎/箭头上方的细边框。 谢谢！

【问题讨论】：

因为当您使用开箱即用的 BS 时该行不存在，它可能来自另一个 CSS 文件。我会看看是否有一个 tooltip-inner 类从其他地方被调用并删除该边框

如果没有你的任何代码，这个问题是不可能解决的。使用浏览器的开发者控制台检查元素，查看相关元素上是否有border 或box-shadow，当你找到它时，开发者控制台甚至会告诉你样式来自哪个文件和行号。 ..

这不是关于我的代码的问题。这是关于 Twitter Bootstrap 的一般问题。工具提示的外观在箭头上方的边框直接开箱即用，没有任何修改。

【参考方案1】：

更改以下用于引导工具提示的类的 Css。

.tooltip.top .tooltip-arrow,
.tooltip-inner 
    border:none;
    box-shadow:none;
    outline:none;

【讨论】：

感谢您的建议。它让我找到了正确的方向。我进行了彻底的搜索，并且没有覆盖此行为的自定义 CSS。所以我修改了 bootstrap.css 文件来纠正这个问题。我通过将每个类中的绝对位置调整 +1px 来更改类“.tooltip.tooltip placement.tooltip-arrow”。这缩小了差距并隐藏了浅色边框。感谢您的意见。

你不需要改变你的引导 css。只需使用“！important”将此代码添加到您的自定义css文件中。重要的是优先考虑添加的 css。例如：.tooltip.top .tooltip-arrow, .tooltip-inner border:none !important;盒子阴影：无！重要；大纲：无！重要；