即使在摺疊時也顯示的引導程序Navbar鏈接

Question

我使用Bootstrap創建了一個導航欄。我希望大多數按鈕在手機上合併到菜單中，但我希望主要部分的鏈接始終顯示在頂層以方便訪問。

因此，例如，這裏的未塌縮的觀點：

我要崩潰的時候，「團隊」和「線索」按鈕，甚至保持。工作人員和網格應顯示在出現的漢堡菜單下。現在我只需在navbar-header內部有'頂級'按鈕作爲navbar-nav。摺疊時，它們呈現摺疊樣式並填充整個寬度和堆疊。

<nav class="navbar navbar-default navbar-fixed-top"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#extra-nav" aria-expanded="false"> 
        <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="/"> 
        Mine 
       </a> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Teams</a></li> 
        <li><a href="#">Clues</a></li> 
       </ul> 
      </div> 

      <div class="collapse navbar-collapse" id="extra-nav"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li><a href="#">Staff</a></li> 
        <li><a href="#">Grid</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

我想「活動」按鈕高亮，所以如果有一個簡單的方法使用navbar-btn（這似乎停留在頂部，如果它不是在一個navbar-collapsed得到那種風格，我會樂於嘗試。

Answer 1

結帳這只是一點點變化navbar-brand。

使用navbar-brand爲隊和線索和下面守我！

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#extra-nav" aria-expanded="false"> 
 
     <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="/"> 
 
        Mine 
 
       </a> 
 
     <a class="navbar-brand active" href="">Teams</a> 
 
     <a class="navbar-brand" href="">Clues</a> 
 

 
    </div> 
 

 
    <div class="collapse navbar-collapse" id="extra-nav"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Staff</a> 
 
     </li> 
 
     <li><a href="#">Grid</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav>

謝謝...