Bootstrap弹出框位置不正确。

Question

我一直在为Bootstrap的弹出窗口实现一些额外的放置方式，并且它们都非常好用。然而，我在弹出窗口中使用动态内容时遇到了问题。

内容渲染得很好，但是如果我在弹出窗口中使用顶部定位，并且它的高度根据其内容（动态）变化，则放置位置会变错:

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

- Sneaksta

---

你能发布你的代码吗？ - Carol Skelly

我在弹出框的定位上并没有使用任何自定义代码，只是使用了标准的Bootstrap插件。但是，在内容区域内我使用了AngularJS代码，因此Bootstrap不知道渲染内容的高度。有没有办法解决这个问题？ - Sneaksta

哪个版本的Bootstrap？（原因是，如果有访问BS 3中存在的弹出窗口事件（如“shown”）的权限，将使这个过程变得更容易。） - BjornJohnson

我真的认为在股票版bootstrap上发生这种情况的jsFiddle会帮助我们更快地解决问题。还值得注意的是您使用的bootstrap版本，因为从2到3它发生了很大的变化。 - sulfureous

我支持建议使用jsFiddle，特别是展示angular如何设置弹出框的HTML。这是通过触发弹出框的元素上的data-html属性来实现的吗？我开始设置自己的fiddle，但如果不知道你是如何做的，那就有点无意义了。 - BjornJohnson

Answer 1

试试这个：

.popover{position:fixed;}

- ɐsɹǝʌ ǝɔıʌ

Answer 2

你需要类似这样的东西：

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

缺失的是它。

- Danield

Answer 3

默认情况下，它处于顶部位置，请将其移动到底部并根据其调整位置。然后，高度将向上增加，不会影响您的设计。

- user2618352