如何更改引导弹出箭头的大小答案

【问题标题】：How to change the size of bootstrap popover arrow如何更改引导弹出箭头的大小
【发布时间】：2019-08-27 19:34:48
【问题描述】：

我正在尝试在我的页面上的元素上实现弹出框以用于教程级别。但是，我似乎无法弄清楚如何增加箭头的大小。我正在使用引导程序 3.4.0。

目前看起来是这样的：

这是我当前的 CSS：

.popover {
  background-color: rgb(214, 245, 233);
}
 /* Right */
.popover.right .arrow:after {
  border-right-color: rgb(97, 95, 3);
}
.popover.right{
  border: 5px solid rgb(10, 10, 10);
}
/* Left */
.popover.left .arrow:after {
  border-left-color: rgb(10, 10, 10);
}
.popover.left{
  border: 5px solid rgb(10, 10, 10);
}
/* Top */
.popover.top .arrow:after {
  border-top-color: rgb(10, 10, 10);
}
.popover.top{
  border: 5px solid rgb(10, 10, 10);
}
/* Bottom */
.popover.bottom .arrow:after {
  border-bottom-color: rgb(10, 10, 10);
}
.popover.bottom{
  border: 5px solid rgb(10, 10, 10);
}

这里是 HTML：

<div class="blocklyDiv" id="blocklyDiv" data-container="body" data- 
html="true" data-toggle="popover" data-placement="right"></div>

通过 Jquery 添加内容

$('#blocklyDiv').popover({ content: getPopContent('blocklyDiv') });

我对此很陌生，所以如果你能假设我不知道很多，我将不胜感激。

【问题讨论】：

你能告诉你使用的引导版本吗？
据我所知，在 Bootstrap Popover 插件中，您无法为箭头指定特定大小。至少不在弹出框选项中。
我使用的是 bootstrap 3.4.0

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 popover

【解决方案1】：

Twitter 基于less

// Tooltips and popovers
// -------------------------
@tooltipColor:            #fff;
@tooltipBackground:       #000;
@tooltipArrowWidth:       5px;
@tooltipArrowColor:       @tooltipBackground;

@popoverBackground:       #fff;
@popoverArrowWidth:       10px;
@popoverArrowColor:       #fff;
@popoverTitleBackground:  darken(@popoverBackground, 3%);

// Special enhancement for popovers
@popoverArrowOuterWidth:  @popoverArrowWidth + 1;
@popoverArrowOuterColor:  rgba(0,0,0,.25);

如果使用 sass，请尝试理解 SASS Variables。

请同时提及您的 HTML，以获得更多说明

【讨论】：