Bootstrap header navbar height Menüeinträge

Question

Ich komme zu dir, weil ich mir bei einem Design-Problem mit bootstrap navbars die Haare aus dem Kopf reiße.

Ich habe eine feste Top Navbar mit verschiedenen Menüs, eins auf der rechten Seite und eins auf der linken Seite. Mein CSS-Code verwandelt den Hintergrund meiner Links in das Grau, wenn der Benutzer sie bewegt. Aber ich merke, dass meine Menüpunkte nicht die gleiche Höhe haben, so dass die neue Farbe nicht die volle Höhe der Überschriftsleiste ausfüllt, wenn mein Zeiger das kleinere Element berührt. Dies ist ein paar Screenshots helfen Ihnen:

Und es ist der Code meiner Kopfleiste:

<div class="container-fluid header-bar"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="index.html">Admin Page</a> 
    </div> 
    <!-- /.navbar-header --> 
    <ul class="nav navbar-nav navbar-left"> 
    <li> 
     <a href class=" profile_image" > 
     <img src="../../../images/user.png" class="img-circle" alt="profile-pic"> {{vm.account.name}} 
     </a> 
    </li> 
    </ul> 
    <ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown" uib-dropdown=""> 
     <a href class="dropdown-toggle lang_selector" uib-dropdown-toggle=""> 
     <span class="flag-sm flag-sm-{{vm.defaultLang.flag}}"></span><span class="lang_desc">{{vm.defaultLang.text}}</span> <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu" role="menu" uib-dropdown-menu=""> 
     <li ng-repeat="lang in vm.langs"><a href class="lang_selector" ng-click="vm.defaultLang = lang"><span class="flag-sm flag-sm-{{lang.flag}}"></span><span class="lang_desc">{{lang.text}}</span></a></li> 
     </ul> 
    </li> 
    <li> 
     <a href="" ng-click="vm.logout()"> 
     <md-icon class="li-icon-black material-icons" aria-label="logout">exit_to_app</md-icon> 
     </a> 
    </li> 
    </ul> 
</div> 

Und es gibt die CSS-Code:

.smsmode-nav .navbar-header { 
    width: 250px; 
} 
.lang_selector > span { 
    vertical-align: middle; 
    } 
    .lang_desc { 
    margin-left: 8px 
    } 
    .navbar-nav > li > a.profile_image { 
     padding-top: 10px; 
     padding-bottom: 10px; 
    } 
.profile_image > img { 
    width: 30px; 
} 

Ich kenne die Es ist eine Geschichte von Padding, aber ich versuche alles und ich kann es nicht reparieren. Ich bin verzweifelt! Also ich brauche deine Hilfe bitte!

Answer 1

hallo dieses css i Sie Ihre Lösungen erhaltene Hoffnung entfernen

.lang_selector > span { 
vertical-align: middle; 
    }