合併navbar-fixed-top和navbar-static-top

我在這裏發現了類似的問題，但沒有提到這一點。合併navbar-fixed-top和navbar-static-top

我有一個非常寬的網站，所以當我使用navbar-static-top時，它不會覆蓋整個寬度，當我使用navbar-fixed-top時，它不會在打開內容時下推內容

我可以同時擁有兩個選項嗎？這意味着一個固定的導航欄，將內容向下推進

<div id="collapseMenu" class="navbar navbar-inverse navbar-right navbar-fixed-top"> 
     <div class="container"> 
     <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <div class="collapse navbar-collapse navbarHeaderCollapse "> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>    
      <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
      <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>    
      <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li> 
      <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>    
      </ul> 
     </div> 
     </div> 
    </div>

來源

2014-10-30 Sherbieny

你可以使用jQuery來檢測調整大小導航欄的高度，然後調整頂部填充。 – Christina 2014-10-30 16:29:51

我不明白 – Sherbieny 2014-10-30 18:34:15

我沒有很好地讀你的問題。忽略評論。這是一個靜態的導航欄http://getbootstrap.com/examples/navbar-static-top/，它佔用了全部寬度。這可能是因爲你的導航欄上有奇怪的類。什麼是導航欄 - 正確的做你的導航欄？它只發生在孩子身上。 – Christina 2014-10-30 20:01:25

恐怕不是。一個fixed元素被從流中取出，因此不能以任何方式下推內容。但是，如果您只關注navbar-static-top上的導航欄寬度，請嘗試從元素中刪除navbar-right類。

<div id="collapseMenu" class="navbar navbar-inverse navbar-static-top"> 
    <div class="container"> 
    <a href="#Home" class="navbar-brand img-responsive img-circle"><img src="Images/C SHARK-white-150x199.png" alt="C SHARK" class="img-size" /></a> 
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbarHeaderCollapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
    <div class="collapse navbar-collapse navbarHeaderCollapse "> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#Home"> <span class="glyphicon glyphicon-home"></span> Home</a></li>    
     <li><a href="#AboutUs"> <span class="glyphicon glyphicon-info-sign"></span> About Us</a></li> 
     <li><a href="#OurWork"> <span class="glyphicon glyphicon-wrench"></span> Our Work</a></li>    
     <li><a href="#Technologies"> <span class="glyphicon glyphicon-phone"></span> Technologies</a></li> 
     <li><a href="#ContactUs"> <span class="glyphicon glyphicon-envelope"></span> Contact Us</a></li>    
     </ul> 
    </div> 
    </div> 
</div>

Working Example

來源

2014-10-30 16:27:22 Sebsemillia

不幸的是，這並沒有工作，它卡在頁面的左側，請注意我有一個500％的引導容器流體的網站，分爲5 20％的行。所以當我滾動到右側時，導航欄留在起始點 – Sherbieny 2014-10-30 18:32:03

Mhmm，我認爲最好是如果在bootply中重現您的問題。在這種情況下，如果沒有看到您的完整代碼正在運行，很難爲您提供幫助。 – Sebsemillia 2014-10-30 18:39:41

我在這裏創建了它http://www.bootply.com/PhOKT1y4TI，雖然滑動動畫不起作用，但是現在你已經有了這個想法，寬500％的容器有5個20％的列，並在它們之間水平滑動，目標是將菜單粘貼到頂部，並在縮小視圖時切換內容。如果你切換到渲染視圖，你可以看到它被卡住，但是在整個寬度上被拉伸，我希望它固定在20％和視圖移動，如果你改變靜態爲固定，你會得到，但下推選項是不更多... – Sherbieny 2014-10-30 20:38:45

合併navbar-fixed-top和navbar-static-top

回答

相關問題