jquery - Bootstrap 弹出框边框 CSS

Question

我想使用 CSS 增加 Popover 边框的厚度。我设法用这段代码做到了这一点，但它留下了旧的细线箭头。增加 Popover 箭头粗细以使其看起来均匀的 CSS 代码是什么？

.popover.bottom
  {
    border-top: 5px solid #000000;
    border-left: 5px solid #000000;
    border-right: 5px solid #000000;
    border-bottom: 5px solid #000000;
  }

谢谢

Answer 1

您需要更改.arrow的border-width。

.popover>.arrow {
    border-width: 16px;
}

这需要重新定位 :after 伪元素和 .arrow 元素。

像这样的东西会很好用:

EXAMPLE HERE

.popover.bottom>.arrow:after {
    top:7px;
    border-bottom-color: #f7f7f7;
}
.popover.bottom>.arrow {
    margin-left:-5px;
    border-bottom-color: #000;
    margin-top:-5px;
}

值得注意的是，您需要根据弹出窗口的位置更改此定位..

例如，如果您正在设计.popover.right(而不是.popover.bottom)，您可以使用如下内容:

EXAMPLE HERE

.popover.right>.arrow:after {
    left: 8px;
    bottom: -10px;
}
.popover.right>.arrow {
    left: -16px;
    margin-top: -12px;
    border-right-color: #000;
}
.popover>.arrow {
    border-width: 12px;
}