css – Popover被隐藏在Twitter Bootstrap的导航栏下

我的导航栏中有一个帮助按钮,具有popover功能.

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
           <div class="nav pull-right">
               <div class="cb_inline_block">               
                   <a class="btn btn-small cb_inline_block icon timezone_help" data-content="{% trans 'hahaha' %}" rel="popover" href="#" data-original-title="{% trans 'Time Zone' %}"><i class="icon-question-sign icon-large"></i></a>

使用Javascript：

$(document).ready(function () { $('.timezone_help').click(show_timezone_help); };

function show_timezone_help(event){
    event.preventDefault();
    $('.timezone_help').popover('show');
}

但是当我点击它时,popover被隐藏在导航栏后面.

我真的要手动设置z-index吗？这将是痛苦的.我一定在做错事.谢谢.

解决方法

首先,你的问题的答案是,popovers并不打算在一个固定的导航栏中使用.在变量中,您将找到以下z索引列表：

// Z-index master list
// -------------------------
// Used for a bird's eye view of components dependent on the z-axis
// Try to avoid customizing these :)
@zindexDropdown:          1000;
@zindexPopover:           1010;
@zindexTooltip:           1030;
@zindexFixednavbar:       1030;
@zindexModalBackdrop:     1040;
@zindexModal:             1050;

你可以看到,Popovers打算在固定的导航栏之下滑动.但是,您会注意到,工具提示不会,您也可以使用触发器：“点击”工具提示.

否则,如果你在popover上死机,你将不得不手动更改它的z-index.以下将激活它,并永久更改它的z-index,所以你不必担心每次显示时都会这样做,或者像这样：

$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index',1030);​​​​​​​​​​​​​​​​​​​​​​​​

JSFiddle

第二,只是一个解释为什么我的例子似乎工作,而你的没有.

我们的两个例子(mmfansler JSFiddle和houmie JSFiddle)之间的重要差异点在2.1.0和2.1.1之间实际上并没有区别.他们都有z-index：固定导航栏和z-index的1030：popo的1010(这是你的抱怨).

真正的区别是,我的2.1.0的例子也是加载响应代码.由于某些原因BootstrapCDN更改了命名约定：

> 2.1.0中的bootstrap.min.css是一个组合版本
> bootstrap.min.css在2.1.1中只有非响应

我怀疑这是一个错误,因为至于我写这个bootstrap-combined.min.css也是不响应的！

无论如何,影响popover显示的两者之间的唯一区别是：

.navbar-fixed-top,.navbar-fixed-bottom {
  position: static;
}

然而,这个规则只适用于某些媒体查询(当然,JSfiddle当然会因为渲染的视口很小而被激活).

否则,当导航栏不是静态的时候,您将继续在导航栏下方看到弹出窗口.

你可能想关注BootstrapCDN Issue #41