在视口内保持bootstrap popover

Question

我正在尝试使用带有按钮的侧边栏创建一个菜单，每个按钮都包含一个包含相关数据的指定弹出窗口。 不幸的是，其中一个弹出窗口可能包含任意数量的行，在某些情况下，它可能部分位于视口之外。

有关问题的示例，请参阅http://jsfiddle.net/bfd9f/1/（点击＆＃34;任务＆＃34;按钮）

我认为我可以通过编程方式将popover的顶部更改为已定义的值，当为负时（即在视口之外）并且为此，我已经设法在侦听时获取对popover的第一个div的引用到show.bs.popover事件。 不幸的是，我认为由于它还没有渲染，它的大小似乎是（23,107），而它应该是（300，xxx）和（0,0）的位置

有没有办法解决这个问题？也许首先在屏幕外渲染popover来测量它？如果是的话，我该怎么做？

由于

Answer 1

修正了即将推出的Bootstrap v3.2.0中我相信：http://jsfiddle.net/pkP77/1/

由https://github.com/twbs/bootstrap/pull/12328

中引入的新viewport功能提供

Answer 2

您始终可以使用top覆盖弹出窗口的!important值 这可能不是最好的长期计划，因为它可能会干扰未来的CSS更改

 .popover {
        width: 300px !important;
        top: 0px !important;
    }

http://jsfiddle.net/smurphy/x9hnk/

更新

离开你提到的事件似乎有效。

$('.btn-popover').on('shown.bs.popover', function (event) {
    //Set timeout to wait for popup div to redraw(animation)
    setTimeout(function(){
        if($('div.popover').css('top').charAt(0) === '-'){
             $('div.popover').css('top', '0px');
             var buttonTop = $(event.currentTarget).position().top;
             var buttonHeight = $(event.currentTarget).height();
             $('.popover.left>.arrow').css('top', buttonTop + (buttonHeight/2));
        }
    },100);
});

http://jsfiddle.net/smurphy/e6YaY/2/

这会使箭头与按钮对齐。