Question

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

Answer 1

这与popover的容器属性有关。

参见附件中的例子。显示两个弹出窗口然后将窗口从xs断点调整为sm断点。您将看到顶部项目将从按钮中分离，因为容器默认为正文。（我也通过选项将它设置为正文）。第二个项目附加到父div，以便即使断点发生更改，也会保留一个附加到元素。

将popover追加到特定元素。例如：容器：＆＃39; body＆＃39;。此选项特别有用，因为它允许您定位触发元素附近文档流中的popover - 这将防止弹出物从触发中浮起窗口调整大小时的元素。

$('#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/

如何在Bootstrap 3x中正确锚定popovers

1 个答案: