Stil benutzerdefinierte Links (außerhalb Navbar-Nav) in Navbar wie andere Bootstrap Bootswatch

Question

Ich habe eine Navbar, in der einige der Navbar Links immer angezeigt werden, auch im Kollapsmodus. Ich verwende Bootswatch's Paper Theme: Bootswatch Paper Theme.

Desktop:

Mobile/Komprimiert:

Der Inhalt, der zu einem div durch Hinzufügen 'navbar'header' erfolgt weiterhin zu zeigen und es richtig ziehen, so dass die Standard-Styling nicht auf die Links in diesem Bereich angewendet.

Ich habe einige Stile angewendet, aber es gibt immer noch ein paar Probleme.

• Ich bin nicht in der Lage Anker-Tag() zu den Links hinzufügen, die immer zeigen (zB ‚Zeigte Link 1‘)

• Wenn ich auf dem Usernamen Dropdown klicken und klicken und eine der halten Menü-Links (dh Profile), dann ändert sich die Farbe:

es sollte jedoch auf die Standard Dropdown ähnlich aussehen (links):

<div class="navbar-header navbar-right pull-right"> 
    <ul class="nav pull-left"> 
     <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 1</li> 
     <li class="navbar-text navbar-link pull-left navbar-always-show">Show Link 2</li> 
     <li class="dropdown pull-right"> 
      <a href="#" data-toggle="dropdown" id="user-dropdown" class="dropdown-toggle"> 
       User Name <span class="glyphicon glyphicon-user"></span> 
       <b class="caret"></b> 
      </a> 
      <ul class="dropdown-menu"> 
       <li class="navbar-link"> 
        <a href="https://stackoverflow.com/users/id" title="Profile">Profile</a> 
       </li> 
       <li> 
        <a href="/logout" title="Logout">Logout </a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 

Hier ist ein JSFiddle: JSFiddle

---

Gibt es eine Möglichkeit zu/ändern Sie die Variable Datei hinzufügen, so dass die Standard-Styling unabhängig davon angewendet werden kann Bootswatch Thema verwendet wird, und/oder sogar Standard-Bootstrap-Thema?

Answer 1

Wenn ich Ihre Fragen richtig zu verstehen:

• Ich bin nicht in der Lage Anker-Tag() zu den Links hinzufügen, die immer zeigen (dh 'Zeige Link 1')

Try den Anker-Tag vor dem <li>

<a href="#"><li class="navbar-text navbar-link pull-left 
     navbar-always-show">Show Link 1</li></a> 

• hinzufügen Wenn ich cli Klicken Sie auf das Dropdown-Menü Benutzername und halten Sie eine der Menüverknüpfungen gedrückt (d. h. Profil), dann ändert sich die Farbe:

Es gibt zwei Dinge, die Sie tun können:

Sie können entweder eine zusätzliche Klasse ul in den HTML-Code hinzufügen und dann Stil fügen Sie die Standard-CSS außer Kraft zu setzen, oder überschreiben Sie einfach den Standardstil für nav.

HTML

<ul class="nav pull-left nav-override"> 

CSS

.nav-override .open > a, .nav-override .open > a:hover, .nav-override .open > a:focus { 
    color: #ffffff!important; 
    background-color: #0c7cd5!important; 
} 

oder

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus { 
    color: #ffffff!important; 
    background-color: #0c7cd5!important; 
} 

fiddle