gpt4 book ai didi

javascript - 如何在 bootstrap 4 中控制 popover-arrow 的位置

转载 作者:数据小太阳 更新时间:2023-10-29 05:25:02 24 4
gpt4 key购买 nike

我正在尝试在 bootstrap 4 中使用 popover。我在右上角设置了切换按钮。

首先,如果我在按钮上设置弹出窗口:

    $(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})

弹出窗口将显示为部分离开屏幕,如:

enter image description here

然后我尝试在展示位置中使用“auto”而不是“bottom”,但在这种情况下,弹出窗口不起作用...

之后,我再次在位置中使用“底部”并使用偏移将弹出窗口向左移动 50 像素并增加弹出窗口的宽度:

$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})

CSS:

.popover-content{
width: 270px;
}

然后弹窗显示如下:

enter image description here

现在 popover-arrow 位置放错了,我尝试用 ''shown.bs.popover' 事件移动箭头位置,例如:

 $('[data-toggle="popover"]').on('shown.bs.popover', function () {
$('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});

但它不起作用......

有谁知道如何在显示时移动箭头位置或隐藏箭头?

提前致谢。

最佳答案

您可以使用以下样式调整箭头的位置:

Bootstrap 3

.popover.bottom > .arrow {
margin-left: 50px;
}

Bootstrap 4

.popover.bs-tether-element-attached-top::after,
.popover.bs-tether-element-attached-top::before{
left: 65%;
}

关于javascript - 如何在 bootstrap 4 中控制 popover-arrow 的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41017943/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com