Twitter Bootstrap Popover:如何设置“展示位置"取决于屏幕尺寸? [英] Twitter Bootstrap Popover: how to set "placement" depending on screen size?

问题描述

我正在尝试使用 http://twitter.github.io/bootstrap/javascript.html#popovers .在较大的屏幕上，我希望弹出窗口显示在右侧.在较小的屏幕上，我想我希望它显示在顶部或底部.有办法吗?

I'm trying to use http://twitter.github.io/bootstrap/javascript.html#popovers. On larger screens, I want the popover to appear on the right. On smaller screens, I think I want it to appear either at the top or bottom. Is there a way to do this?

推荐答案

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

Most people use CSS media queries for responsive designs, we can do the exact same thing in javascript.

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

}else if(screen.width > somevalue){

}

与等同于device-width

或者，如果您希望使用可见宽度

Or, if you preferred to use the visible width

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

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

}

这将在所有带有媒体查询的浏览器和设备上保持一致.

This will be consistent across all browsers and devices with media-queries.

这篇关于Twitter Bootstrap Popover:如何设置“展示位置"取决于屏幕尺寸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！