带有导航栏固定顶部和 Bootstro 的 Bootstrap答案

【问题标题】：Bootstrap with navbar fixed top and Bootstro带有导航栏固定顶部和 Bootstro 的 Bootstrap
【发布时间】：2013-10-30 11:33:44
【问题描述】：

我正在使用 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的地址，但我不知道如何申请（如果有必要）

谢谢

【问题讨论】：

向下滚动时希望看到标题 fixed？
请详细定义问题，感谢您提供小提琴。我可以看到小提琴，但无法理解问题。还有一些设置被覆盖，使用包含的 CSS 文件，所以我们应该修改/删除它。
问题是当我点击教程时，顶部导航栏没有被 bootstro 覆盖（如果选项没有出现，则最大化输出区域。我希望整个页面是半透明黑色...顶部导航不是我想要的太多
哦，我现在明白了。 click on Tutorial in 的使用让我感到困惑。我以为你指的是打开你的小提琴。

标签： html css twitter-bootstrap bootstro

【解决方案1】：

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

引导程序 navbar 的 z-index 为 1030，因此为了使 bootstro backdrop 覆盖导航栏，您需要将 z-index 调整为高于 1030。
例如

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

您还需要确保引导程序 popover 未被覆盖，因此您需要将其 z-index 增加到高于 2000。

.popover {
    z-index:2001;   
}

FIDDLE

【讨论】：

感谢特雷弗，它有效。但我发现了另一种情况，有一个特定的按钮和引导程序......很快就会在这里发布，但你已经有了我的声誉。