使用 twitter bootstrap 定位弹出框答案

【问题标题】：positioning a popover using twitter bootstrap使用 twitter bootstrap 定位弹出框
【发布时间】：2012-04-12 19:42:40
【问题描述】：

如果我在 <a> 元素上有一个弹出框并按如下方式调用它

$(function () {
    $('#element').popover({
        placement:'top',
        title:'some title',
        content: $('#some-div').html()
    });
});

弹出框显示元素的顶部中心，如何让弹出框显示元素的右上角或左上角？

【问题讨论】：

遗憾的是只有：top |底部 |离开 |对....并且由于它对位置进行了硬编码，因此仅使用一些CSS来修复并不容易。我认为唯一的解决办法是设置一个负边距来纠正它。但我不完全明白你希望它看起来如何？

标签： jquery css twitter-bootstrap

【解决方案1】：

您可以添加到标准弹出框布局的样式中，以将弹出框移动到您想要的位置。这是直接取自 bootstrap-popover.js 的标准弹出框布局：

<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>

因此，要将其向右移动 15px，您可以将以下内容添加到您的样式中：

.popover {margin-left: 15px;}

【讨论】：

【解决方案2】：

到目前为止，你不能，你目前仅限于top | bottom | left | right，为了这样的精度，你可以修改另一个插件的显示，例如tipsy jQuery 插件，它是引导工具提示插件开始。

Bootdtrap Popover Documentation.

【讨论】：

【解决方案3】：

使用“left”而不是“margin-left”。引导弹出窗口使用绝对位置。说 .popover{left:15px;}

【讨论】：