我正在使用Bootstrap Bootstro,但无法使顶部导航栏落后于叠加层.
http://jsfiddle.net/NJsYw/5/(点击教程)
<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的地址,但我不知道如何申请(如果有必要)
谢谢
解决方法
这可以使用CSS完成,键是z-index,它指定元素的堆栈顺序.
引导导航栏的z-index为1030,因此要使bootstro背景覆盖导航栏,您需要将z-index调整为高于1030.
例如
.bootstro-backdrop { .... z-index: 2000; }
您还需要确保未覆盖引导程序弹出窗口,因此您需要将其z-index增加到高于2000.
.popover { z-index:2001; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。