Bootstrap Navbar-Links, die auch dann angezeigt werden, wenn sie minimiert sind

Question

Ich erstelle eine Navbar mit Bootstrap. Ich möchte, dass die meisten Schaltflächen in einem Menü auf Mobilgeräten zusammengefasst werden, aber ich möchte, dass die Links im Hauptabschnitt immer auf oberster Ebene angezeigt werden, um einen einfachen Zugriff zu ermöglichen.

So zum Beispiel, hier ist das nicht zusammengeklappten Ansicht:

ich die ‚Teams‘ will und ‚Clues‘ Tasten auch bleiben, wenn zusammengebrochen. Staff und Grid sollten unter dem angezeigten Hamburger-Menü erscheinen. Im Moment habe ich nur die 'Top Level' Tasten als navbar-nav in meinem navbar-header. Wenn sie reduziert werden, nehmen sie den reduzierten Stil an und füllen die gesamte Breite und den Stapel.

<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> 

Ich mag die ‚aktive‘ Schaltfläche Hervorhebung, so, wenn es eine einfache Möglichkeit, diese Art von Stil zu erhalten, indem ein navbar-btn mit (was an der Spitze zu bleiben scheint, wenn es nicht in einem navbar-collapsed ist würde ich sein glücklich, das zu versuchen.

Answer 1

Kasse dies nur eine wenig Veränderung in navbar-brand.

Verwendung navbar-brand für Teams und Clues und hält unten in -Mine!

<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>

Danke ...