即使容器设置正确，也无法正确放置Bootstrap popover：'body'设置

Question

我在表格中有一个按钮可以切换弹出框。我设置了data-container="body"以及我使用javascript版本尝试过它。

我的popover看起来像这样:(我点击了第一个按钮）

我的按钮代码在这里：

<button id="testsettracesBtn1" class="btn btn-large btn-danger" data-toggle="popover" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">Click to toggle popover</button>

这是我的javascript：

<script type="text/javascript">
      $("#testsettracesBtn1").popover({ container: 'body'});
</script>

如何才能实现它以使我的弹出窗口正确？ （是的，我有最新的bootstrap版本。）

Answer 1

我遇到了同样的问题，但是bug的来源是我的Bootstrap框架已经过时了。我升级到2.3.2并且container: 'body'属性开始工作。

这让我很头疼......直到我发现问题不在我自己的代码中！

Answer 2

这种奇怪的行为是由于我表中的许多select元素引起的。我不知道为什么？在单击按钮后，我只是将弹出窗口的宽度更改为max-width。如果宽度正确，箭头也会向右：

$(document).ready(function(){    
    $("[id^=kommentareBtn-]").popover({ container: 'body', placement: 'bottom', html: true });

    //this fixed my problem...
    $("[id^=kommentareBtn-]").click(function() {
      $(".popover").css("width", "276px");
    });
});