使用Twitter Bootstrap定位一个弹出框

Question

如果我在一个<a>元素上有一个弹出窗口，并按照以下方式调用它：

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

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

- marknery

---

很遗憾，只有：top | bottom | left | right。由于它硬编码了位置，所以不容易用CSS修复。我认为唯一的解决方案是设置负边距来进行校正。但我不太明白你想让它看起来怎样？ - Marco Johannesen

Answer 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;}

- Ruslans Uralovs

Answer 2

目前你只能使用top | bottom | left | right，如果需要更精确的控制，可以修改其他插件的显示效果，比如tipsy jQuery插件，bootstrap tooltip插件最初就是基于此插件开发的。 Bootdtrap Popover文档。

- Andres Ilich

Answer 3

使用"left"代替"margin-left"。Bootstrap的弹出框使用绝对定位。例如：.popover{left:15px;}

- Ken Chan