Popover在Twitter Bootstrap的导航栏下隐藏 [英] Popover gets hidden under the nav bar in Twitter Bootstrap

问题描述

我在导航栏中有一个帮助按钮，具有弹出功能。

 < div class =navbar navbar-固定顶部> 
< 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_helpdata-content ={％trans'hahaha'％} =popoverhref =＃data-original-title ={ ％trans'Time Zone'％}>< i class =icon-question-sign icon-large>< / i>< / a> 
  

Javascript：

 code> $（document）.ready（function（）{$（'。timezone_help'）。click（show_timezone_help）;}; 
 
 function show_timezone_help（event）{
 event .preventDefault（）; 
 $（'。timezone_help'）。popover（'show'）; 
} 
  

但是当我点击它时，popover隐藏在导航栏后面。

我真的需要手动设置z索引吗？非常感谢。非常感谢。

解决方案

首先，你的问题的答案是popovers不是在 variables.less 中，您将找到以下z-index列表：

  // Z-index主列表
 // ------------------------- 
 //用于组件的鸟瞰视图，取决于z轴
 //尝试避免定制这些:) 
 @zindexDropdown：1000; 
 @zindexPopover：1010; 
 @zindexTooltip：1030; 
 @zindexFixedNavbar：1030; 
 @zindexModalBackdrop：1040; 
 @zindexModal：1050; 
  

正如你所看到的，Popovers打算在固定的导航栏下滑动。但是，你会注意到工具提示不会，你也可以使用工具提示上的 trigger：'click'

。

否则，如果你是popset上的deadset，你将不得不手动更改它的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 ，对于popovers，它们有 z-index：1010 你的抱怨）。

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

• 2.1.0中的bootstrap.min.css是一个组合版本


• 在无响应的2.1.1中的bootstrap.min.css

我怀疑这是一个错误，因为从我写这个 bootstrap-combined.min.css 也是没有响应！

无论如何，两者之间的唯一区别其影响弹出窗口显示是：

  .navbar-fixed-top，.navbar- fixed-bottom {
 position ： 静态的;这条规则只适用于某些媒体查询（当然在JSFiddle中） 
 
 
 
否则，当navbar不是静态时，你将继续看到navbar下的popovers。 p> 
 
 
您可能需要关注 BootstrapCDN Issue＃41  
 
I have a help button within my navbar, with a popover functionality.
<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');
}
But when I click on it the popover is hidden behind the nav bar.

Do I really have to set the z-index manually? That would be painful.  SUrely I must be doing something wrong. Thanks.

解决方案
First, the answer to your question is that popovers are not intended to be used in a fixed navbar.  In the variables.less, you will find the following list of z-indexes:
// 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;
As you can see, Popovers are intended to slip beneath the fixed navbar.  However, you will notice that Tooltips will not, and you can also use trigger: 'click' on tooltips.

Otherwise, if you are deadset on the popover, you are going to have to manually change it's z-index.  The following will activate it and permanently change it's z-index, so you don't have to worry about doing it every time it shows, or anything like that:
$('.timezone_help')
  .popover({placement: "bottom"})
  .data('popover').tip()
    .css('z-index', 1030);​​​​​​​​​​​​​​​​​​​​​​​​


JSFiddle



Second, just an explanation as to why my example seemed to work, whereas yours didn't.

The significant point of difference between our two examples (mmfansler JSFiddle and houmie JSFiddle) was actually not a difference between 2.1.0 and 2.1.1.  Both of them have z-index: 1030 for fixed navbars and z-index: 1010 for popovers (which is what your complaining about).

The real point of difference is that my 2.1.0 example is also loading the responsive code.  For some reason BootstrapCDN changed the naming convention:


bootstrap.min.css in 2.1.0 was a combined version
bootstrap.min.css in 2.1.1 in the non-responsive only


I suspect this is a mistake, since as of me writing this bootstrap-combined.min.css is also non-responsive only!

Anyway, the only difference between the two which affects the popover display is:
.navbar-fixed-top, .navbar-fixed-bottom {
  position: static;
}
This rule however, only holds for certain media queries (which of course in JSFiddle gets activated since the viewport of the render is small).

Otherwise, when the navbar isn't static, you will continue to see the popovers beneath the navbar.

You might want to keep an eye on the BootstrapCDN Issue #41

                        
这篇关于Popover在Twitter Bootstrap的导航栏下隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！