javascript - 是否可以根据屏幕宽度更改 Bootstrap 弹出框的位置？

Question

我有一个项目列表，每个项目都有一个与之关联的 Bootstrap 弹出框（此处的文档）。它们是这样启动的：

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

这可行，但在小宽度下，弹出框会从视口中丢失。我想根据 来设置位置$(document).width();，但是我看不到覆盖初始选项的方法（例如，在大约 1000 像素的宽度处，将位置切换到“上方”​​）。

我在这里的 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';
}

Answer 2

它在小于 768 的窗口上从左到上更改位置

placement: function(){return $(window).width()>768 ? "auto left":"auto top";}