我试图在bootstrap 4中使用popover . 我在右上角设置了切换按钮 .
首先,如果我在buttom上设置popover:
$(function () {
$('[data-toggle="popover"]').popover({
placement: 'bottom'
})
弹出窗口将显示屏幕的一部分,如:
然后我尝试在展示位置使用'auto'而不是'bottom',但在这种情况下,popover不起作用...
之后我再次在展示位置使用'bottom'并使用offset将popover 50px向左移动并增加popover的宽度:
$('[data-toggle="popover"]').popover({
placement: 'bottom',
offset: '0 50px'
})
CSS:
.popover-content{
width: 270px;
}
然后像这样的popover节目:
现在popover-arrow位置错位,我尝试用''shown.bs.popover'事件移动箭头位置,如:
$('[data-toggle="popover"]').on('shown.bs.popover', function () {
$('.popover.bottom .popover-arrow:after').css('right', 50 + 'px');
});
但它不起作用....
有人知道如何移动箭头位置或在显示时隐藏箭头吗?
提前致谢 .
3 回答
您可以使用以下样式调整箭头的位置:
Bootstrap 3
Bootstrap 4
可能尝试使用Bootstrap 4进行引导弹出箭头的React-Bootstrap v1的用户可以使用以下类目标调整箭头的位置:
React-Bootstrap v1.0.0-beta.5
对于Bootstrap 4,这是我如何解决这个问题 .
所以在JQuery中你会监听
show.bs.popover
事件,如下所示:然后,在该事件中,您执行bootstrap
.popover
元素的css更改代码:不起作用?也许是因为改变代码在页面中创建/显示元素之前触发,因此css适用于缺少的元素 . 尝试将css更改代码置于超时 . 最终的代码如下所示:
我的答案适用于特定的弹出窗口 . 你可以从这里解决这个问题 .
另一种选择是使用
!important
为CSS文件中的.popover
元素添加CSS规则,例如: