在折叠导航栏内，在bootstrap3中，Popover被截断

Question

设置问题，这里是情况，问题，屏幕截图和代码 ：

情况：

• 在我的自适应bootstrap3布局中，navbar为fixed-top。

• 我有collapse信息，如文档中所示。

• navbar中有一个按钮/链接，可以调用popover。

问题：

当navbar处于折叠状态时，popover隐藏在分配给navbar选项的可滚动区域内。

屏幕截图：

HTML：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-topnav">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">
            <span class="fa fa-home"></span>
        Unearth Synergy
        </a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-topnav">
        <ul class="nav navbar-nav navbar-left">
    <li><a popover="signin_form" href="#">Sign In<span class="fa fa-sign-in"></span></a></li>
        </ul>
    </div>
</div>

JavaScript：

$('body').popover({
    selector: '[popover]',
    placement: "auto bottom",
    html: true,
    content: function() {
        return $('#'+$(this).attr("popover")).html();
    }
});

那么如何在主要内容区域中显示折叠的navbar >

我显然不希望弹出窗口中的内容被锁定在bootstrap为navbar项分配固定高度可滚动区域导致的可滚动区域内。

我见过与此类似的问题，询问dropdown元素，但没有关于popover元素的问题，这些元素完全不同。由于这个问题似乎与bootstrap使用相关，我发布它，回答它，并且如果有人感兴趣的话可以稍微改进一点。

Answer 1

将container: ‘body’添加到popover的JavaScript声明中，现在会发生以下情况：更接近：

popover现在位于navbar。

之下

但是随着这个CSS扩充，以及JavaScript的调整，问题就解决了......基本上：

.popover.in {
    z-index: 9999;
}

最后（纯美学）问题现在是popover箭头和内容整体上面向扩展链接，而不是链接内容的图标和文本。

这是可以预料的，并且没有可用性障碍，因此问题得以解决：