Bootstrap Popover Border CSS

Question

我想使用CSS增加Popover边框的粗细.我设法用这个代码做了,但它留下了旧的细线箭头.什么是CSS代码也增加了Popover箭头的厚度,使其看起来均匀？

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

谢谢

Answer 1

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

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

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

这样的东西会运作良好:

这里的例子

.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)你可以使用这样的东西:

这里的例子

.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;
}