Ich möchte meine Navbar in BS3 zu 20px Höhe machen. Wie mache ich das?Wie verringern Sie die Höhe der Navigationsleiste in Bootstrap 3?
Ich habe versucht, die folgenden:
.tnav .navbar .container { height: 28px; }
nichts.
scheint in der Lage zu sein, die Größe der Bar zu erhöhen, kann aber nicht verringern.
Was eine gute Möglichkeit, diese zu tun, während der Behälterausrichtung zu bewahren usw.
Bootstrap hatte 15px oben Polsterung und 15px unten padding auf .navbar-nav > li > a so müssen Sie es verringern, indem es in Ihrem CSS-Datei überschrieben und .navbar hat min-height:50px; verringern Sie es so viel Sie wollen.
zum Beispiel
.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}
diese Klassen zu Ihrem CSS hinzufügen und überprüfen.
Wenn Sie nur ein nav haben und Sie es ändern möchten, sollten Sie Ihre Variablen ändern.less: @navbar-height (irgendwo in der Nähe von Zeile 265, kann ich nicht erinnern, wie viele Zeilen ich meine hinzugefügt).
Dies wird durch das Mixin .navbar-vertical-align referenziert, das zum Beispiel verwendet wird, um das "Toggle" -Element zu positionieren, alles mit .navbar-form, .navbar-btn, und .navbar-text.
Wenn Sie zwei Navbars haben und möchten, dass sie unterschiedliche Höhen haben, kann Minder Saini's answer gut genug funktionieren, wenn sie durch eine z. B. #topnav.navbar weiter qualifiziert wird, sollte aber über mehrere Gerätebreiten getestet werden.
Statt <nav class="navbar ... Verwendung <nav class="navbar navbar-xs...
und fügen Sie diese 3 Linie von CSS
.navbar-xs { min-height:28px; height: 28px; }
.navbar-xs .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-nav > li > a { padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
Ausgang:
Es reagiert nicht. –
Minder Saini ‚s Beispiel über fast funktioniert, aber die .navbar-brand brauchen s ebenfalls reduziert werden.
Ein Arbeitsbeispiel (es auf meiner eigenen Website verwenden) mit Bootstrap 3.3.4:
.navbar-nav > li > a, .navbar-brand {
padding-top:5px !important; padding-bottom:0 !important;
height: 30px;
}
.navbar {min-height:30px !important;}
bearbeiten für mobile ... Um dieses Beispiel Arbeit auf mobilen Sie auch zu machen, haben das Styling der navbar Toggle zu ändern, wie so
.navbar-toggle {
padding: 0 0;
margin-top: 7px;
margin-bottom: 0;
}
die Antwort oben hat gut funktioniert (MVC5 + Bootstrap 3.0), aber die Höhe auf den Standard sobald die navbar b zurück utton tauchte auf (sehr kleiner Bildschirm). Musste das unten in meinem .css hinzufügen, um das auch zu beheben.
.navbar-header .navbar-toggle {
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
}
.navbar-nav > li > a {padding-top:7px !important; padding-bottom:7px !important;}
.navbar {min-height:32px !important;}
.navbar-brand{padding-top:7px !important; max-height: 24px; }
.navbar .navbar-toggle { margin-top: 0px; margin-bottom: 0px; padding: 8px 9px; }
Es wäre hilfreich für die Leser, wenn Sie eine kurze Erklärung hinzufügen könnten, was diese CSS-Stile tun. :) – Nisarg
einfach die navbar-height Standard 50px durch diese auf Ihre Variable überschreibt einschließlich ändern.
Diese Standardnavbar-Höhe finden Sie in den Zeilen 365 und 360 in den Bootstrap-Variablen SASS und LESS.
ist es das, wonach Sie gefragt haben? –
Ja. Vielen Dank! – Rolando
Ich habe viel auf SO und Google gesucht, aber diese Lösung hat es geschafft! Vielen Dank! – n2o