Twitter bootstrap 3 如何在Bootstrap 3x中正确定位弹出框

如果您查看托管的引导演示，并向下滚动到包含所有4个按钮的演示。现在点击左边的弹出框，它会正确显示。但是，当我缩小或扩展屏幕时，弹出框不再固定在正确的点上。有办法解决这个问题吗？

这与popover的容器属性有关

参见所附示例。显示两个弹出窗口，然后将窗口从xs断点调整为sm断点。您将看到顶部项目将与按钮分离，因为容器默认为body。（我还将其设置为body Through options）。第二个项目附加到父div，这样即使断点发生了更改，仍有一个项目附加到元素

将popover附加到特定元素。示例：容器：“body”。 此选项特别有用，因为它允许您定位 触发元素附近文档流中的popover- 这将防止popover从触发点漂走 元素在窗口调整大小期间

潜在修复：您可以添加以下代码。当前仅处理底部对齐的弹出框，但您可以为其他对齐添加选项

$(window).resize(function () {
    $('.popover.in').each(function () {
        var el = $('[aria-describedby="' + this.id + '"]');
        if ($(this).hasClass('bottom')){
        $(this).css('top',el.offset().top + el.outerHeight(true));
        }
    });
});

---

+1有趣的是，我从未注意到这一点。这似乎主要影响我的浏览器（Chrome）中的水平窗口大小调整。似乎有一个公开问题：感谢Skelly没有看到！滚动时也不会粘住

$(window).resize(function () {
    $('.popover.in').each(function () {
        var el = $('[aria-describedby="' + this.id + '"]');
        if ($(this).hasClass('bottom')){
        $(this).css('top',el.offset().top + el.outerHeight(true));
        }
    });
});