Is it possible to change the position of Bootstrap popovers based on screen width?

问题:

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' }); 

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').

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

回答1:

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

回答2:

Its change placement from left to top on window smaller than 768

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

文章来源: Is it possible to change the position of Bootstrap popovers based on screen width?