html – 带导航栏固定顶部和Bootstro的Bootstrap

发布时间：2020-12-14 22:30:58 所属栏目：资源来源：网络整理

导读：我正在使用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" c

我正在使用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;   
}

FIDDLE

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!