Verringern der Höhe der Bootstrap 3.0-Navigationsleiste

108

Ich versuche, die Höhe der Bootstrap 3.0-Navigationsleiste zu verringern, die bei festem Top-Verhalten verwendet wird. Hier verwende ich Code.

HTML

<div class="tnav">
<div class="navbar navbar-fixed-top" role="banner">
    <div class="navbar-inner-sm">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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>
    </div>
    <nav class="collapse navbar-collapse" role="navigation">
      <ul class="nav navbar-nav pull-right">
        <li class="active">
          <a href="../getting-started">Getting started</a>
        </li>
        <li>
          <a href="../css">Ext01</a>
        </li>
        <li>
          <a href="../components">Language</a>
        </li>
        <li>
          <a href="../javascript">My Account</a>
        </li>
        <li>
          <a href="../customize">Sign Out</a>
        </li>
      </ul>
    </nav>
  </div>
    </div>
</div>

CSS

.tnav .navbar { background:#F06; height:30px; }
.navbar-inner-sm{background-color: #282828;padding: 1px 20px;background-repeat: repeat-x;-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);box-shadow: 0 1px 3px rgba(0, 0, 0, .25), inset 0 -1px 0 rgba(0, 0, 0, .1);background-image: linear-gradient(top, #333333, #222222);}
.navbar-inner-sm .nav {position: relative;left: 0;display: block;float: left;margin: 0 10px 0 0;}
.navbar-inner-sm .nav.pull-right {float: right;}
.navbar-inner-sm .nav > li {display: block;float: left;}
.navbar-inner-sm .nav > li > a {float: none;padding: 4px 5px;line-height: 19px;color: #999999;text-decoration: none;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);}
.navbar-inner-sm .nav > li > a:hover {background-color: transparent;color: #ffffff;text-decoration: none;}
.navbar-inner-sm .nav .active > a,.navbar .nav .active > a:hover {color: #ffffff;text-decoration: none;background-color: #003753;}
.navbar-inner-sm .divider-vertical {height: 27px;width: 1px;margin: 0 9px;overflow: hidden;background-color: #282828;border-left: 1px solid #3f3f3f; border-right: 1px solid #161616;}
.navbar-inner-sm .nav.pull-right {margin-left: 10px;margin-right: 0;}

Ergebnis

Geben Sie hier die Bildbeschreibung ein

Auf dem angezeigten Bildschirm wurde die Ausgabe der Navigationsleiste verringert, die Höhe jedoch nicht. Die ursprüngliche Höhe ist in rosa Farbe dargestellt.

Das obige CSS-Skript funktioniert in Bootstrap 2 fast gut. *

Gibt es eine Möglichkeit, die Höhe richtig zu verringern?

irfanmcsd
quelle
Keine Notwendigkeit mehr für <div class = "navbar-inner"> in Bootstrap 3
Bartek S
navbar-inner ist meine benutzerdefinierte Klasse. nicht mit Bootstrap 3.0 verwandt.
irfanmcsd
Der einzige Weg, der für mich funktioniert hat, wird unter diesem Link erklärt: stackoverflow.com/questions/19576175/… Es verringert die Höhe der Navigationsleiste mit nur zwei Codezeilen
giovannim

Antworten:

124

Nachdem ich einige Stunden verbracht hatte, wurde mein Problem durch Hinzufügen der folgenden CSS-Klasse behoben.

Arbeiten Sie mit Bootstrap 3.0. *

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

Arbeiten Sie mit Bootstrap 3.3.4

.navbar-nav > li > a, .navbar-brand {
    padding-top:4px !important; 
    padding-bottom:0 !important;
    height: 28px;
}
.navbar {min-height:28px !important;}

Aktualisieren Sie den vollständigen Code, um die Höhe der Navigationsleiste mit einem Screenshot anzupassen und zu verringern.

Geben Sie hier die Bildbeschreibung ein

CSS:

/* navbar */
.navbar-primary .navbar { background:#9f58b5; border-bottom:none; }
.navbar-primary .navbar .nav > li > a {color: #501762;}
.navbar-primary .navbar .nav > li > a:hover {color: #fff; background-color: #8e49a3;}
.navbar-primary .navbar .nav .active > a,.navbar .nav .active > a:hover {color: #fff; background-color: #501762;}
.navbar-primary .navbar .nav li > a .caret, .tnav .navbar .nav li > a:hover .caret {border-top-color: #fff;border-bottom-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover {}
.navbar-primary .navbar .nav > li.dropdown.open > a {color: #fff;background-color: #9f58b5;border-color: #fff;}
.navbar-primary .navbar .nav > li.dropdown.open.active > a:hover .caret, .tnav .navbar .nav > li.dropdown.open > a .caret {border-top-color: #fff;}
.navbar-primary .navbar .navbar-brand {color:#fff;}
.navbar-primary .navbar .nav.pull-right {margin-left: 10px; margin-right: 0;}
.navbar-xs .navbar-primary .navbar { min-height:28px; height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 28px; }
.navbar-xs .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 28px; }
.navbar-sm .navbar-primary .navbar { min-height:40px; height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-brand{ padding: 0px 12px;font-size: 16px;line-height: 40px; }
.navbar-sm .navbar-primary .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 40px; }

Verwendungscode:

<div class="navbar-xs">
   <div class="navbar-primary">
       <nav class="navbar navbar-static-top" role="navigation">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-8">
                 <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="#">Brand</a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8">
              <ul class="nav navbar-nav">
                  <li class="active"><a href="#">Home</a></li>
                  <li><a href="#">Link</a></li>
                   <li><a href="#">Link</a></li>
              </ul>
          </div><!-- /.navbar-collapse -->
      </nav>
  </div>
</div>
irfanmcsd
quelle
4
Dies funktioniert nicht ... Überprüfen Sie meine Antwort auf dieser Seite ... Die Mindesthöhe für .navbar ist standardmäßig auf 50 Pixel eingestellt. Wenn Sie also die Höhe auf 28 Pixel einstellen, wird sie durch die Mindesthöhe von 50 Pixel überschrieben. ..
Patrick
3
Ah, ich sehe, dass dieser Beitrag bearbeitet wurde (viel!) Und jetzt tatsächlich den richtigen Code zeigt. Ich sehe auch die Mindesthöheneinstellung, die ich in meinem Beitrag hier vorgeschlagen habe und die aus irgendeinem Grund eine Abwertung erhalten hat. Es ist sehr frustrierend, über eine Antwort, die richtig, thematisch und klar ist, herabgestimmt zu werden ...
Patrick
@patrick weiß nicht was du meinst, aber zu der Zeit wurde mein Problem mit meiner eigenen Antwort gelöst. Ruf habe keine Frage, ob Leute mich nach oben oder unten stimmen lassen.
irfanmcsd
1
Das Bearbeiten der Quelle hätte dies einfacher gemacht
Luke
Komisch, das hat bei mir nicht funktioniert. Ich musste die feste Höhe von 50px überschreiben;
Kevin
43

Arbeitslösung:

Bootstrap 3.0 hat standardmäßig eine 15px-Polsterung oben und unten, daher müssen wir es nur überschreiben!

Beispielsweise:

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}
Ranveer
quelle
Der Standardwert ist 10px in bootstrap.css? .navbar-nav> li> a {padding-top: 10px; Polsterung unten: 10px; Zeilenhöhe: 20px; }
Jichi
1
Überprüfen Sie die Zeilennummer 3884 in bootstrap.css (v3.0.2). Es ist .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}standardmäßig.
Ranveer
Ich bin mir nicht sicher über v3.0.2. In v3.0.3 Zeile 4541 in bootstrap.css heißt es jedoch: .navbar-nav> li> a {padding-top: 10px; Polsterung unten: 10px; Zeilenhöhe: 20px; }
Jichi
Sie, mein Herr, sind mein Held.
Orokusaki
40

Überschreiben Sie einfach die in .navbar festgelegte Mindesthöhe wie folgt:

.navbar{
  min-height:20px; //* or whatever height you require
}

Das Ändern der Höhe eines Elements auf etwas, das kleiner als die Mindesthöhe ist, macht keinen Unterschied ...

Patrick
quelle
Wie Sie in der Navigationsleiste sehen, verwende ich bereits die Eigenschaft height, aber ohne Wirkung.
irfanmcsd
Es ist die Eigenschaft der Mindesthöhe, nicht die Höhe. Wenn Sie die Höhe auf eine Zahl einstellen, die niedriger als die
Mindesthöhe ist,
7
Warum wird das abgelehnt? Es ist eine funktionierende Lösung für das in diesem Beitrag festgelegte Problem. Kann sich ein Moderator das bitte ansehen? Es scheint einen Downvoter zu geben, der einfach Dinge ablehnt, mit denen er nicht einverstanden ist, ohne die tatsächliche Antwort zu überprüfen. Ein Link, der 2,5 Monate nachdem mein Beitrag die gleiche Antwort erhalten hat, weiter oben gepostet wurde, befindet sich auf einem externen Link und hat zwei positive Stimmen erhalten. Ich hasse es, wenn Leute SO mit zufälligen Abstimmungen verwässern!
Patrick
Ich habe mich oft gefragt, wie die Leute jetzt eine Ablehnung bekommen haben. Bekommst du eine Benachrichtigung? Konnte dies nicht auf Meta finden
Iulian Onofrei
5
Keine Benachrichtigung ... Anscheinend geben die Leute Abstimmungen ab, wenn sie denken, dass eine andere Antwort besser ist oder so ... Ich weiß nicht ... In diesem Fall nahm der Typ, der die Frage stellte, meine Antwort in seine eigene Antwort und akzeptierte diese Antwort. Ein bisschen lahm, wenn du mich fragst ... Aber andererseits geht es auf dieser Seite nicht um Ego, sondern darum, anderen zu helfen ...
Patrick
27

Wenn Sie weniger Quelle verwenden, sollte die variables.lessDatei eine Variable für die Navigationsleistenhöhe enthalten. Wenn Sie die Quelle nicht verwenden, können Sie sie mithilfe des auf der Bootstrap-Site bereitgestellten Dienstprogramms zum Anpassen anpassen. Und dann können Sie es herunterladen und in Ihr Projekt aufnehmen. Die gesuchte Variable ist:@navbar-height

AJ Meyghani
quelle
1
aber ich möchte das ursprüngliche Verhalten der Navigationsleiste nicht ändern. Ich ändere nur die Höhe für zusätzliche obere Navigationsleiste.
irfanmcsd
2
Ich denke, es ist die beste Lösung.
Imtiaz
1
Dies ist die beste Lösung, wenn Sie nur ein Navi auf der Site haben und es diese Höhe haben sollte. Wenn Sie mehrere Navigationsgeräte haben, wird es etwas schwieriger, da .navbar-vertical-align an mehreren Stellen verwendet wird und einen harten Bezug zu @ navbar-height hat.
Carl Bussema
schöne Lösung. solange Sie nicht vorhaben, CDN zu verwenden
eagor
1
Solange Sie Overrides in einem separaten, weniger partiellen Bereich verwenden, ist dies die beste Lösung und sollte es Ihnen ermöglichen, Bootstrap ohne Probleme zu aktualisieren.
Ken Prince
9

Das ist meine Erfahrung

 .navbar { min-height:38px;   }
 .navbar .navbar-brand{ padding: 0 12px;font-size: 16px;line-height: 38px;height: 38px; }
 .navbar .navbar-nav > li > a {  padding-top: 0px; padding-bottom: 0px; line-height: 38px; }
 .navbar .navbar-toggle {  margin-top: 3px; margin-bottom: 0px; padding: 8px 9px; }
 .navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
 .navbar .navbar-collapse {border-color: #A40303;}

Ändern Sie die Höhe des Navabr auf 38px

Hoàng Vũ Tgtt
quelle
Fügen Sie dies hinzu, um sich um .navbar-Form zu kümmern:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
steph643
Eine weitere Erweiterung: .navbar .navbar-text {margin-top: 0px; Rand-unten: 0px; Zeilenhöhe: 38px; }
cnmuc
3

Wenn Sie Ihre Stylesheets mit LESS / SASS generieren und dort Bootstrap importieren, können Sie beim Überschreiben der Variablen @ navbar-height die Höhe der Navigationsleiste festlegen, die ursprünglich in der Datei variables.less definiert wurde.

Geben Sie hier die Bildbeschreibung ein


quelle
3

Wollte meine 2 Pence und ein Dankeschön an James Poulose für seine ursprüngliche Antwort hinzufügen, es war die einzige, die für mein spezielles Projekt funktionierte (MVC 5 mit der neuesten Version von Bootstrap 3).

Dies richtet sich hauptsächlich an Anfänger, um Klarheit zu schaffen und zukünftige Änderungen zu vereinfachen. Ich schlage vor, dass Sie einen Abschnitt am Ende Ihrer CSS-Datei für Ihr Projekt hinzufügen. Ich möchte dies beispielsweise tun:

/* Bootstrap overrides */

.some-class-here {
}

Als ich James Pouloses Antwort oben nahm, tat ich Folgendes:

/* Bootstrap overrides */   
.navbar-nav > li > a { padding-top: 8px !important; padding-bottom: 5px !important; }
.navbar { min-height: 32px !important; }
.navbar-brand { padding-top: 8px; padding-bottom: 10px; padding-left: 10px; }

Ich habe die Auffüllwerte geändert, um den Text auf meinem Navigationsleistenelement nach unten zu drücken. Sie können jedes Bootstrap-Element wie dieses so ziemlich überschreiben, und es ist eine gute Möglichkeit, Änderungen vorzunehmen, ohne die Boostrap-Basisklassen zu vermasseln, da Sie als letztes dort Änderungen vornehmen und diese dann verlieren möchten, wenn Sie Bootstrap aktualisiert haben!

Schließlich möchte ich für noch mehr Trennung meine CSS-Dateien aufteilen und @ import-Deklarationen verwenden, um Ihre Unterdateien zur einfachen Verwaltung in eine Haupt-CSS-Datei zu importieren, zum Beispiel:

@import url('css/mysubcssfile.css');

Hinweis : Wenn Sie mehrere Dateien abrufen, müssen Sie sicherstellen, dass sie in der richtigen Reihenfolge geladen werden.

Hoffe das hilft jemandem.

Tahir Khalid
quelle
2

Ich denke, wir können diese weniger Stile schreiben, ohne die vorhandene Farbe zu ändern. Folgendes hat bei mir funktioniert (in Bootstrap 3.2.0)

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

Die letzte ('navbar-brand') wird tatsächlich nur benötigt, wenn Sie Text als 'Markennamen' haben.

James Poulose
quelle
Gute Antwort Dies war die einzige, die für mich mit der neuesten Version von Bootstrap 3 funktioniert hat (ein Hinweis: Wenn Sie Ihren Text nach unten drücken möchten, erhöhen Sie den Füllwert für die .navbar-Markenklasse sowie für .navbar-nav> li> a classses.
Tahir Khalid
0

Ich habe das gleiche Problem, die Höhe meiner von Bootstrap bereitgestellten Menüleiste war zu groß. Eigentlich habe ich einen falschen Bootstrap heruntergeladen und ihn schließlich durch Herunterladen des ursprünglichen Bootstraps von dieser Site entfernt. Http://getbootstrap.com/2.3 .2 / Ich möchte Bootstrap in yii (Netbeans) verwenden. Folgen Sie diesem Tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw ... Die Stimme ist nicht vorhanden, aber die Schritte sind langsam, die Sie leicht verstehen und implementieren können Sie. Vielen Dank

Usman I.
quelle
Was im Code haben Sie geändert, um den gewünschten Effekt zu erzielen? Wenn Sie in einer Antwort auf einen Link verweisen, sollten Sie die Lösung zusammenfassen.
Brian