引导弹出框未正确定位答案

【问题标题】：Bootstrap Popovers are not positioned correctly引导弹出框未正确定位
【发布时间】：2013-07-30 23:31:52
【问题描述】：

我一直在为引导程序的弹出框实现一些额外的放置，它们都运行得很好。但是，我在弹出框的动态内容方面遇到了问题。

内容渲染得很好而且花花公子，但是如果我对弹出框使用顶部定位，并且它的高度会根据它的内容（动态）变化，那么放置就会出错：

如何修复弹出框，以便在调整高度时，锚点保持不变？

【问题讨论】：

你能发布你的代码吗？
弹出框的顶部位置应考虑弹出框内容的正确高度。根据弹出框的高度设置顶部位置。您是否先设置弹出框顶部，然后在其中添加/更改内容？有没有机会看到当前代码或其中的一部分？
我真的没有使用任何自定义代码来放置弹出框，只是使用标准的引导插件。但是，我在内容区域内使用 angularJS 代码，因此引导程序不知道我认为的渲染内容的高度。有办法解决这个问题吗？
哪个版本的引导程序？（原因是，可以访问 BS 3 中存在的弹出框事件，例如“显示”，这将使这更容易。）
我真的认为在股票引导程序上发生这种情况的 jsFiddle 会帮助我们帮助您更快地解决它。另外值得注意的是您使用的是什么版本的引导程序，因为它从 2 到 3 变化很大

标签： css twitter-bootstrap angularjs popover

【解决方案1】：

试试这个：

.popover{position:fixed;}

【讨论】：

【解决方案2】：

默认是置顶位置，请设置在底端，并根据它调整位置。然后高度会向上增加，不会影响你的设计。

【讨论】：

【解决方案3】：

你会想要这样的：

FIDDLE

.bubble 
{
    position: absolute;
    left: -100px; /* -half width of bubble + half width of button */
    bottom: 100%; 
    margin-bottom: 15px; /* height of callout spike */
    width: 250px;
    min-height: 50px;
    padding: 5px;
}

从问题中的图像看来，规则

margin-bottom: 15px; /* height of callout spike */

是缺少的那个。

【讨论】：