Popover隐藏在Twitter Bootstrap中的导航栏下

Question

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

<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');
}

但是当我点击它时,弹出窗口隐藏在导航栏后面.

我真的必须手动设置z-index吗？那会很痛苦.我必须做错事.谢谢.

Answer 1

首先,您的问题的答案是弹出窗口不适用于固定的导航栏.在variables.less中,您将找到以下z-index列表:

// 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旨在滑过固定的导航栏.但是,您会注意到工具提示不会,您也可以使用trigger: 'click'工具提示.

否则,如果您在弹出框中处于死机状态,则必须手动更改它的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: 1030固定的导航栏和z-index: 1010弹出窗口(这是你抱怨的).

真正的不同之处在于我的2.1.0示例还加载了响应代码.由于某种原因,BootstrapCDN更改了命名约定:

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

我怀疑这是一个错误,因为我写这个bootstrap-combined.min.css时也只是无响应!

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

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

但是,此规则仅适用于某些媒体查询(当然,由于渲染的视口很小,因此JSFiddle会被激活).

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

您可能希望关注BootstrapCDN问题#41