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

Posted 2023-05-08

【中文标题】如何更改引导弹出箭头的大小

【英文标题】：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

【参考方案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，以获得更多说明