css - 当目标元素 float 时，Bootstrap 3.2 弹出窗口无法正确定位

Question

正如标题所说，我在让 Bootstrap 弹出框正确定位目标元素 float 的位置时遇到了问题。在此处进行 Bootply 演示:

http://www.bootply.com/xqA2bb2mkJ

要点是我正在尝试创建一个顶部导航栏，其中最右边的元素之一在单击时会显示一个弹出窗口。正如您在演示中看到的那样，弹出窗口出现在适当的位置，但箭头在弹出窗口的中间轻敲，而不是在它应该位于的顶部。

如果float:right;从 .wrapper 元素中删除指令，然后弹出窗口正确显示。

我已经弄乱了 popover 本身的内容，看看是否影响了事情，但它似乎并没有这样做。例如，设置 html: true 或 html: false 无关紧要。弹出窗口中是否存在 HTML 内容似乎也没有什么区别。

此外，将目标元素放在 Bootstrap HTML 框架中(容器 > 行 > col-xs-* 等)并不能解决问题。事实上，我从该层次结构中的目标开始，看到了错误，然后从所述层次结构中删除了 anchor ，希望这只是我必须通过的一些 CSS 冲突。唉，情况似乎并非如此。

希望这对我来说是愚蠢的事情。感谢您的帮助!

Answer 1

看起来 .popover 在被推到最右边时需要定义一个宽度，我尝试应用 .popover { width: 150px; }，它现在似乎可以正确呈现。

查看 fork :http://www.bootply.com/Qnk0F0CsVl