三个bootstrap 3 popovers中有一个垂直偏移

Question

好的，我在询问之前已经搜遍了整个互联网;-)这里有：

我有一个带有粘性页脚的bootstrap3网站，其中包含3个伪链接以触发弹出窗口：

工作

工作

不工作

正如您所看到的，第三个是偏移的。 它是唯一一个包含html的内容，因此必须是原因

这是页脚呈现的代码：

<div class="footer">
  <div class="container">
    <a href="#" id="popo_vers" class="text-muted credit pull-left  text-center" data-toggle="popover" data-content="&lt;h4&gt;xxx&lt;/h4&gt;&lt;img src='/sites/5379f65f74fe729da1000003/theme/images/logo_spr_web_icon.png'/&gt;&lt;h4&gt;xxxxx&lt;/h4&gt;&lt;img src='/sites/5379f65f74fe729da1000003/theme/images/xxx_sm.png'/&gt;" data-original-title="Credits" data-placement="top" data-html="true">XXXX - v1.0 © 2014 Xxxxxxx</a>
    <a href="#" id="popo_aide" class="text-muted credit pull-right text-center" data-toggle="popover" data-content="azer@azer.com Fond&nbsp;du&nbsp;couloir&nbsp;à&nbsp;droite" data-original-title="Besoin d'aide?" data-placement="top">&nbsp;aide</a>
    <a href="#" id="popo_lega" class="text-muted credit pull-right text-center" data-toggle="popover" data-content="blahblah" data-original-title="Mentions légales" data-placement="top">mentions légales • </a>
  </div>
</div>

js触发：

$('[data-toggle="popover"]').popover({
    trigger: 'hover'
});

如果您需要更多信息，请告知我们（现在不能调整它，它是一个包含大量内容的铁路网站）。 THX

Answer 1

很难说没有小提琴，你可以尝试将容器设置为正文：

$('[data-toggle="popover"]').popover({
    trigger: 'hover',
    container: 'body'
});

来自Bootstrap doc：

  

将popover追加到特定元素。示例：容器：   '身体'。此选项在允许您使用时特别有用   将弹窗置于触发附近的文档流中   元件    - 在窗口调整大小期间，这将阻止弹出窗口从触发元素浮动。