我的导航栏中有一个帮助按钮,具有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);
第二,只是一个解释为什么我的例子似乎工作,而你的没有.
我们的两个例子(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
