twitter-bootstrap 即使使用容器,Bootstrap 弹出窗口也未正确放置:'body' 设置

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17297701/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 17:25:12  来源:igfitidea点击:

Bootstrap popover isn't placed correctly even with container: 'body' set

javascripthtmltwitter-bootstrap

提问by philm5

I've got a button in a table which should toggle a popover. I have set the data-container="body"as well as I have tried it with the javascript version.

我在表格中有一个按钮,可以切换弹出窗口。我已经设置data-container="body"了 javascript 版本,并且我已经尝试过了。

My popover looks like this: (I have clicked the first button)

我的弹窗看起来像这样:(我点击了第一个按钮)

enter image description here

在此处输入图片说明

My button code is here:

我的按钮代码在这里:

<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>

And here my javascript:

这里是我的 javascript:

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

How can i achieve it to place my popover right? (And yes I have the newest bootstrap version.)

我怎样才能实现它来正确放置我的弹出框?(是的,我有最新的引导程序版本。)

采纳答案by philm5

This strange behaviour is caused because of many selectelements in within my table. I don't know why? I just changed the width of the popover to max-width, after the button is being clicked. With the correct width also the arrow is positioned right:

这种奇怪的行为是由于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");
    });
});

回答by ktm5124

I had the same problem, but the source of the bug was that my Bootstrap framework was outdated. I upgraded to 2.3.2 and the container: 'body'attribute started working.

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

It caused me quite a headache... until I found out the problem was not in my own code!

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