Verringern der Höhe der Bootstrap 3.0-Navigationsleiste

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

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?

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.

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>

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}

Ü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 ...

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

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

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.

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.

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.

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