Bootstrap Popover Border CSS

时间:2014-03-11 21:48:37

标签: jquery css twitter-bootstrap twitter-bootstrap-3 popover

我想使用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;
  }

由于

1 个答案:

答案 0 :(得分:7)

您需要更改border-width的{​​{1}}。

.arrow

这需要重新定位.popover>.arrow { border-width: 16px; } 伪元素和:after元素。

这样的事情很有效:

EXAMPLE HERE

.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),您可以使用以下内容:

EXAMPLE HERE

.popover.bottom