在第一個導航欄下放置第二個導航欄

Question

我正在使用Bootstrap在我的頁面頂部創建導航欄。

我的目標是創建一個第二個導航欄，它的高度較小，位於原始導航欄的下方，並固定在頂部，這樣當用戶滾動時，兩個導航欄都會隨之滾動。

我看着this，並添加margin-top:43px;不推第二導航欄原來導航欄的下面，但我body-content沒有自動調整..而不是第二導航欄只是切斷頂了我身體的內容。

我剛與第二導航欄一起開始這一點，所以這裏我原來的導航欄的HTML：

---

HTML：

<nav class="navbar navbar-fixed-top navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu" role="menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 


<nav class="navbar navbar-fixed-top navbar-inverse" style="margin-top:50px"></nav> 

<div class="container body-content"> 

    <p>This is a test!</p> 
    @RenderBody() 

    <footer> 
     <p>&copy; @DateTime.Now.Year - ASP.NET Application</p> 
    </footer> 

</div> 

這裏是一個可視化的BOOTPLY我正在試圖解釋。

讓我知道如果我可以解釋別的。

任何幫助表示讚賞。

Answer 1

由於您使用的2個固定的導航欄，你必須加倍對required body padding以容納兩個導航欄的總高度..

body { 
    padding-top: 135px; 
} 

http://www.bootply.com/iY0za3bfls

它不必是正如135px所示，正如文檔中所解釋的那樣，您應該在知道導航欄高度爲50px的情況下嘗試自己的值。