是否可以根据屏幕宽度更改Bootstrap popovers的位置？ [英] Is it possible to change the position of Bootstrap popovers based on screen width?

问题描述

我有一个项目列表，每个项目都有一个与之关联的Bootstrap popover（ docs here ）。他们是这样发起的：

I have a list of items, and each one has a Bootstrap popover associated with it (docs here). They are initiated like this:

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

这样可行，但在宽度较小时，弹出窗口会从视口中丢失。我想根据 $（document）.width（）; 来设置条件，但是我看不到覆盖初始选项的方法（例如，在大约1000px的宽度处，将位置切换到上方​​）。

This works, but at small widths the popover is lost from the viewport. I'd like to make the placement conditional based on $(document).width();, however I can't see a way to over-ride the initial options (e.g. at at width of around 1000px, switch the placement to 'above').

我在这里放了一个简化版在jsfiddle 。非常感谢。

I've put together a simplified version at jsfiddle here. Many thanks.

推荐答案

展示位置也可以将函数作为其值。在此函数中，您可以根据视口的宽度返回适当的值。例如。

placement can also take a function as its value. In this function you can return the appropriate value based on width of viewport. For eg.

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

这篇关于是否可以根据屏幕宽度更改Bootstrap popovers的位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！