具有固定在顶部的导航栏和Bootstro的Bootstrap

赫里斯

我正在使用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的键is来完成z-index

引导navbarz-index1030所以为了使bootstro backdrop覆盖导航栏,你需要调整z-index比1030更高的

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

您还需要确保popover不覆盖引导程序,因此需要将其z-index增大为2000

.popover {
    z-index:2001;   
}

小提琴

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

具有固定在顶部的导航栏和Bootstro的Bootstrap

来自分类Dev

导航栏固定在顶部

来自分类Dev

Bootstrap导航栏在固定在顶部时反复跳跃

来自分类Dev

bootstrap 4 导航栏固定在顶部,在滑块上方透明,如果滑出滑块则带有背景

来自分类Dev

如何使导航栏固定在顶部

来自分类Dev

bootstrap导航栏固定顶部和身体填充顶部

来自分类Dev

固定的顶部和底部导航栏之间具有可滚动的内容

来自分类Dev

Bootstrap导航栏未固定在手机顶部

来自分类Dev

当导航栏固定在滚动条顶部时,添加品牌徽标和li

来自分类Dev

向下滚动时如何使标题和导航栏都固定在顶部

来自分类Dev

是否可以将UIView的顶部固定在导航栏的底部?

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

向下滚动时,导航栏变为透明并固定在顶部

来自分类Dev

滚动时如何将导航栏固定在顶部?

来自分类Dev

如何正确使导航栏保持固定在屏幕顶部?

来自分类Dev

向下滚动到时,将导航栏固定在顶部

来自分类Dev

顶部导航栏的位置固定在Firefox中怪异

来自分类Dev

固定在顶部导航栏覆盖网站上的引导程序

来自分类Dev

向下滚动时,导航栏变为透明并固定在顶部

来自分类Dev

如何使导航栏固定在页面顶部且不可重叠

来自分类Dev

CSS-使导航栏在滚动时固定在固定顶部导航栏上吗?

来自分类Dev

尽管具有z-index,但内容超出了固定导航栏的顶部

来自分类Dev

顶部带有导航提示的固定导航栏

来自分类Dev

全高布局,具有折叠和固定在引导板上的侧边栏3

来自分类Dev

Bootstrap 3导航栏固定顶部与内容重叠

来自分类Dev

Bootstrap 3固定顶部导航栏显示水平滚动

来自分类Dev

Bootstrap导航栏固定顶部隐藏页面内容

来自分类Dev

Bootstrap固定顶部导航栏与垂直滚动条重叠

来自分类Dev

Bootstrap 3固定顶部导航栏显示水平滚动

Related 相关文章

  1. 1

    具有固定在顶部的导航栏和Bootstro的Bootstrap

  2. 2

    导航栏固定在顶部

  3. 3

    Bootstrap导航栏在固定在顶部时反复跳跃

  4. 4

    bootstrap 4 导航栏固定在顶部,在滑块上方透明,如果滑出滑块则带有背景

  5. 5

    如何使导航栏固定在顶部

  6. 6

    bootstrap导航栏固定顶部和身体填充顶部

  7. 7

    固定的顶部和底部导航栏之间具有可滚动的内容

  8. 8

    Bootstrap导航栏未固定在手机顶部

  9. 9

    当导航栏固定在滚动条顶部时,添加品牌徽标和li

  10. 10

    向下滚动时如何使标题和导航栏都固定在顶部

  11. 11

    是否可以将UIView的顶部固定在导航栏的底部?

  12. 12

    如何正确使导航栏保持固定在屏幕顶部?

  13. 13

    向下滚动时,导航栏变为透明并固定在顶部

  14. 14

    滚动时如何将导航栏固定在顶部?

  15. 15

    如何正确使导航栏保持固定在屏幕顶部?

  16. 16

    向下滚动到时,将导航栏固定在顶部

  17. 17

    顶部导航栏的位置固定在Firefox中怪异

  18. 18

    固定在顶部导航栏覆盖网站上的引导程序

  19. 19

    向下滚动时,导航栏变为透明并固定在顶部

  20. 20

    如何使导航栏固定在页面顶部且不可重叠

  21. 21

    CSS-使导航栏在滚动时固定在固定顶部导航栏上吗?

  22. 22

    尽管具有z-index,但内容超出了固定导航栏的顶部

  23. 23

    顶部带有导航提示的固定导航栏

  24. 24

    全高布局,具有折叠和固定在引导板上的侧边栏3

  25. 25

    Bootstrap 3导航栏固定顶部与内容重叠

  26. 26

    Bootstrap 3固定顶部导航栏显示水平滚动

  27. 27

    Bootstrap导航栏固定顶部隐藏页面内容

  28. 28

    Bootstrap固定顶部导航栏与垂直滚动条重叠

  29. 29

    Bootstrap 3固定顶部导航栏显示水平滚动

热门标签

归档