Bootstrap with navbar fixed top and Bootstro

我使用的是Bootstrap + Bootstro，但无法使顶部导航栏位于覆盖层后面。Bootstrap with navbar fixed top and Bootstro

<div id="wrap"> 

    <!-- Fixed navbar --> 
    <div class="navbar navbar-fixed-top"> 
    <div class="navbar-inner"> 
     <div class="container"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="brand" href="#">Project name</a> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
      <li><a href="#" id='tutorial'>Tutorial</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 
    </div> 

    <!-- Begin page content --> 
    <div class="container"> 
    <div class="page-header"> 
    </div> 
    <p class="lead bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='0'>Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p> 
    <p class="bootstro" data-bootstro-title='Title' data-bootstro-content="Description." data-bootstro-width="400px" data-bootstro-placement='bottom' data-bootstro-step='1'>Back to <a href="./sticky-footer.html">the sticky footer</a> minus the navbar.</p> 
    </div> 

    <div id="push"></div> 
</div> 

<div id="footer"> 
    <div class="container"> 
    <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p> 
    </div> 
</div>

看起来这是地址在这里https://github.com/clu3/bootstro.js/issues/15但我不知道如何申请（如果有必要）

感谢

来源

2013-10-30 Khrys

你希望有头'fixed'向下滚动查看？ – Trevor

请详细说明问题，谢谢您提供小提琴。我可以看到小提琴但不能理解问题。还有一些设置被覆盖，使用包含的CSS文件，因此我们应该修改/删除它。 – MarmiK

问题是，当我点击教程时顶部导航栏没有被bootstro覆盖（如果该选项没有显示，最大化输出区域，我希望整个页面是半透明的黑色......并且顶部导航并不是我想要它太 – Khrys

这可以使用CSS完成，关键是z-index，它指定元素的堆栈顺序。

自举navbar具有1030 z-index所以为了使bootstro backdrop覆盖你需要调整z-index为高于1030
例如导航栏

.bootstro-backdrop 
{ 
    .... 
    z-index: 2000; 
}

你还需要确保引导popover不是盖的，所以你需要增加的Z-index比2000更高。

.popover { 
    z-index:2001; 
}

FIDDLE

来源

2013-11-07 17:15:03 Trevor

感谢Trevor，它的工作原理。但是我发现了另外一个特定按钮和靴子的情况......很快就会在这里发布，但是您已经拥有了我的声望。 – Khrys

感谢您的帮助！ – Khrys

Bootstrap with navbar fixed top and Bootstro

回答

相关问题