是否可以根据屏幕宽度更改Bootstrap popovers的位置？

Question

我有一个项目列表,每个项目都有一个与之关联的Bootstrap popover(这里的文档).他们是这样发起的:

$('#my_list li').popover({
   placement: 'left'
});

这样可以工作,但是在宽度较小的情况下,弹出窗口会从视口中丢失.我想基于放置条件$(document).width();,但是我看不到覆盖初始选项的方法(例如,在大约1000px的宽度,将位置切换到'上方').

我在这里为jsfiddle编写了一个简化版本.非常感谢.

Answer 1

放置也可以将函数作为其值.在此函数中,您可以根据视口的宽度返回适当的值.例如.

$(document).ready(function(){
    $('#my_list li').popover({
        placement: wheretoplace
    });
});
function wheretoplace(){
    var width = window.innerWidth;
    if (width<500) return 'bottom';
    return 'left';
}