twitter-bootstrap-3 - 如何在 Bootstrap 3x 中正确锚定弹出窗口

Question

如果您查看托管的 Bootstrap 演示 here然后向下滚动到包含所有 4 个按钮的演示。现在单击左侧的弹出窗口，它会正确显示。但是，当我缩小或扩展屏幕时，弹出窗口不再锚定到正确的点。有解决办法吗？

Answer 1

这与弹出窗口的容器属性有关。

http://jsfiddle.net/yvkhbw4b/1/

见附件示例。显示两个弹出框，然后将窗口从 xs 断点调整为 sm 断点。您会看到顶部项目将与按钮分开，因为容器默认为主体。 (我也通过选项将其设置为正文)。第二项附加到父 div，因此即使断点发生变化，第二项仍附加到该元素。

Documentation on popover options

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.

$('#btn1').popover({
        'container': 'body'
});

$('#btn2').popover({
        'container': '.col-sm-12'
});

可能的修复:您可以添加以下代码。目前仅处理底部对齐的弹出框，但您可以为其他对齐方式添加选项。

$(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));
        }
    });
});

http://jsfiddle.net/yvkhbw4b/2/