bootstrap Popover箭头缩放时

hfyxw5xn 于 6个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(75)

前提条件

我有一个用于重复或已关闭问题的 searched
我有一个避免常见问题的任何HTML validated
我阅读了 contributing guidelines

描述问题

似乎在缩放时，弹出窗口箭头的位置并不总是完美。

减少的测试用例

(我将边框颜色更改为全黑色以获得更好的显示效果)
正常显示在100%缩放：

在110%缩放时：

在125%缩放时：

它可能来自于浏览器处理计算和使用rem值进行近似的方式，所以我不确定是否有方法可以解决这个问题。 🤔

您正在哪个操作系统上看到问题？

Windows

您正在哪个浏览器上看到问题？

Chrome

您正在使用哪个版本的Bootstrap?

v5.2.0

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38200

1条答案

按热度按时间

htrmnn0y1#

如果问题是箭头的缩放，我建议解决一个问题，即使缩放级别发生变化，箭头的位置也保持一致。我们可以使用固定像素值而不是rem值来设置弹出窗口箭头的位置。
以下是一个示例：

.popover {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 10px);
  z-index: 1060;
}

.popover .arrow {
  position: absolute;
  display: block;
  width: 1rem;
  height: 0.5rem;
  margin: 0 0.3rem;
  /* Replace the following lines */
  /* top: calc(-0.5rem - 1px); */
  /* left: 50%; */
  /* transform: translateX(-50%) rotate(45deg); */
  /* with fixed pixel values */
  top: -8px;
  left: 50%;
  margin-left: -5px;
  transform: rotate(45deg);
  border: 1px solid #000;
}

你怎么看？

赞(0）回复(0）举报 6个月前

我来回答