jquery - Twitter Bootstrap Popover：如何根据屏幕大小设置“放置”？

Question

我正在尝试使用http://twitter.github.io/bootstrap/javascript.html#popovers。在较大的屏幕上，我希望弹出框出现在右侧。在较小的屏幕上，我想我希望它出现在顶部或底部。有没有办法做到这一点？

Answer 1

我将响应式放置属性放在我的元素上，例如data-placement-xs="top" data-placement-md="left"并使用以下 JavaScript 来初始化我在所有页面中的工具提示：

$('[data-toggle="tooltip"]').tooltip({
    'placement': function(tt, trigger) {
        var $trigger = $(trigger);
        var windowWidth = $(window).width();

        var xs = $trigger.attr('data-placement-xs');
        var sm = $trigger.attr('data-placement-sm');
        var md = $trigger.attr('data-placement-md');
        var lg = $trigger.attr('data-placement-lg');
        var general = $trigger.attr('data-placement');

        return (windowWidth >= 1200 ? lg : undefined) ||
            (windowWidth >= 992 ? md : undefined) ||
            (windowWidth >= 768 ? sm : undefined) ||
            xs ||
            general ||
            "top";
    }
});

Answer 2

大多数人使用 CSS 媒体查询进行响应式设计，我们可以在 javascript 中做同样的事情。

//detect devicen width
if(screen.width < somevalue){

}else if(screen.width > somevalue){

}

与媒体查询等效device-width

或者，如果您更喜欢使用可见宽度

//detect visible width
if(document.documentElement.clientWidth < somevalue){

}else if(document.documentElement.clientWidth > somevalue){

}

这将在所有具有媒体查询的浏览器和设备中保持一致。