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

回答

相關問題