如何防止Bootstrap工具提示崩溃？

Question

如何防止Bootstrap工具提示崩溃？

twitter-bootstraptooltiptwitter-bootstrap-tooltip

3

Bootstrap工具提示会随机分开，将其箭头与其主体分离，如下图所示：

https://istack.dev59.com/WuVvO.webp 我在多个浏览器上使用此网页进行测试，并且可以随机看到此行为，但仍然发生：

Firefox 51.0.1的工具提示：

https://istack.dev59.com/XYR29.webp Microsoft Edge 38.14393.0.0上的工具提示：

https://istack.dev59.com/yVTpP.webp Google Chrome 56.0.2924.87（64位）的工具提示：

https://istack.dev59.com/bD8Mz.webp 如何避免这种情况发生？

PS：我认为这是一个呈现问题，与箭头紧接在主体后面有关，实际上没有别名，但接近它。可能使箭头与主体相交将解决此问题，但如果Bootstrap团队或其他配置存在解决方案，则不必让我混乱工具提示模板。

- Michel Feinstein

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Christina · Accepted Answer

通常当缩放不是100％时，它会像其他类似的东西一样崩溃，这很可能是由于舍入误差导致的。我过去解决这个问题的唯一方法是失去一个像素，然后半个像素四舍五入到一个完整的像素，至少如果页面没有缩放的话，就不会显示出来。

演示：https://jsbin.com/sihafu/edit?html,css,js,output 我使用了HTML的特定性来避免!important。您可以使用您的父类，无论您的工具提示位于何处。

html .tooltip.left .tooltip-arrow {
  right: 1px;
}

html .tooltip.top .tooltip-arrow {
  bottom: 1px;
}

html .tooltip.bottom .tooltip-arrow {
  top: 1px;
}

html .tooltip.right .tooltip-arrow {
  left: 1px;
}