我有一个项目列表,每个项目都有一个与之关联的 Bootstrap 弹出框(此处的文档)。它们是这样启动的:
$('#my_list li').popover({
placement: 'left'
});
这可行,但在小宽度下,弹出框会从视口中丢失。我想根据 来设置位置$(document).width();
,但是我看不到覆盖初始选项的方法(例如,在大约 1000 像素的宽度处,将位置切换到“上方”)。
我在这里的 jsfiddle整理了一个简化版本。非常感谢。
我有一个项目列表,每个项目都有一个与之关联的 Bootstrap 弹出框(此处的文档)。它们是这样启动的:
$('#my_list li').popover({
placement: 'left'
});
这可行,但在小宽度下,弹出框会从视口中丢失。我想根据 来设置位置$(document).width();
,但是我看不到覆盖初始选项的方法(例如,在大约 1000 像素的宽度处,将位置切换到“上方”)。
我在这里的 jsfiddle整理了一个简化版本。非常感谢。
位置也可以将函数作为其值。在此函数中,您可以根据视口的宽度返回适当的值。例如。
$(document).ready(function(){
$('#my_list li').popover({
placement: wheretoplace
});
});
function wheretoplace(){
var width = window.innerWidth;
if (width<500) return 'bottom';
return 'left';
}
它在小于 768 的窗口上从左到上更改位置
placement: function(){return $(window).width()>768 ? "auto left":"auto top";}