it-swarm.com.de

Wie verringern Sie die Navbar-Höhe in Bootstrap 3?

Ich möchte, dass meine Navbar in BS3 eine Höhe von 20px hat. Wie mache ich das?

Ich habe folgendes versucht:

.tnav .navbar .container { height: 28px; }

Tat nichts.

.navbar-fixed-top {
    height: 25px; /* Whatever you want. */
}

Scheint in der Lage zu sein, die Größe des Balkens zu vergrößern, kann aber nicht abnehmen.

Was ist eine gute Möglichkeit, dies zu tun, während die Ausrichtung des Containers beibehalten wird usw.

53
Rolando

bootstrap hatte 15px top padding und 15px bottom padding auf .navbar-nav > li > a, so dass Sie es verringern müssen, indem Sie es in Ihrer css-Datei überschreiben. .navbar hat min-height:50px; so oft Sie wollen.

zum Beispiel 

.navbar-nav > li > a {padding-top:5px !important; padding-bottom:5px !important;}
.navbar {min-height:32px !important}

fügen Sie diese Klassen Ihrer CSS hinzu und überprüfen Sie diese.

104
Minder Saini

Minder Saini s Beispiel oben funktioniert fast, aber der .navbar-brand muss ebenfalls reduziert werden. 

Ein funktionierendes Beispiel (mit meiner eigenen Site) 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;}

Edit for Mobile ... Damit dieses Beispiel auch auf mobilen Geräten funktioniert, müssen Sie das Styling des Navbar-Buttons ändern

.navbar-toggle {
     padding: 0 0;
     margin-top: 7px;
     margin-bottom: 0;
}
54
felwithe

Anstelle von <nav class="navbar ... verwenden Sie <nav class="navbar navbar-xs...

und fügen Sie diese 3 Zeile von CSS hinzu 

.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; }

Ausgabe

enter image description here

24
Yasser

Die obige Antwort funktionierte gut (MVC5 + Bootstrap 3.0), aber die Höhe wurde wieder auf den Standardwert gesetzt, sobald der Navbar-Button angezeigt wurde (sehr kleiner Bildschirm). Musste das unten in meine .css hinzufügen, um das auch zu beheben.

.navbar-header .navbar-toggle {
    margin-top:0px;
    margin-bottom:0px;
    padding-bottom:0px;
}
1
Arfath

Für Bootstrap 4
Einige der vorherigen Antworten funktionieren nicht für Bootstrap 4. Um die Größe der Navigationsleiste in dieser Version zu verringern, empfehle ich, die Auffüllung so zu entfernen.

.navbar { padding-top: 0.25rem; padding-bottom: 0.25rem; }

Sie können es auch mit anderen Stilen versuchen.
. Die gefundenen Stile, die die Gesamthöhe der Navigationsleiste definieren, sind:

  • padding-top und padding-bottom sind für .navbar auf 0.5rem gesetzt.
  • padding-top und padding-bottom sind für .navbar-text auf 0.5rem gesetzt.
  • außer einem line-height von 1.5rem, der von der body geerbt wurde.

Somit ist die Navigationsleiste insgesamt 3,5-mal so groß wie die Schriftgröße der Stammschrift.

In meinem Fall, bei dem ich große Schriftgrößen verwendete; Ich habe die Klasse ".navbar" in meiner CSS-Datei folgendermaßen neu definiert:

.navbar {
  padding-top:    0.25rem; /* 0px does not look good on small screens */
  padding-bottom: 0.25rem;
  font-size: smaller;      /* Just because I am using big size font */
  line-height: 1em;
}

Abschließender Kommentar, verwenden Sie keine absoluten Werte, wenn Sie mit den vorherigen Styles spielen. Verwenden Sie stattdessen die Einheiten rem oder em.

1
ePi272314

Wenn Sie nur ein Nav haben und es ändern möchten, sollten Sie Ihre Variablen ändern. Ohne: @navbar-height (irgendwo in der Nähe von Zeile 265 kann ich mich nicht daran erinnern, wie viele Zeilen ich zu meinem hinzugefügt habe).

Dies wird vom Mixin .navbar-vertical-align referenziert, der beispielsweise zur Positionierung des Elements "toggle" verwendet wird, alles mit .navbar-form, .navbar-btn, und .navbar-text.

Wenn Sie zwei Navbars haben und wünschen, dass sie unterschiedliche Höhen haben, kann Minder Sainis Antwort gut funktionieren, wenn sie durch einen weiteren Code, z. B. #topnav.navbar, qualifiziert werden, der Test sollte jedoch über mehrere Gerätebreiten getestet werden.

0
Carl Bussema
 .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; }
0
HARISH