Diminuzione dell'altezza della barra di navigazione di bootstrap 3.0

Sto cercando di diminuire l'altezza della barra di navigazione di bootstrap 3.0 che viene utilizzata con un comportamento superiore fisso. Qui sto usando il codice.

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

Risultato

Dallo schermo si vede, la barra di navigazione è diminuita nell'output ma l'altezza non è diminuita. l'altezza originale è indicata in colore rosa.

Lo script css sopra funziona quasi bene in bootstrap 2. *

C'è un modo per diminuire l'altezza correttamente.

Dopo aver trascorso alcune ore, l'aggiunta della seguente classe CSS ha risolto il problema.

Lavora con Bootstrap 3.0. *

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

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

Aggiorna il codice completo per personalizzare e diminuire l'altezza della barra di navigazione con lo screenshot.

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

Codice di utilizzo:

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

Soluzione di lavoro:

Bootstrap 3.0 di default ha un riempimento di 15px in alto e in basso, quindi dobbiamo solo sovrascriverlo!

Per esempio:

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

Sostituisci semplicemente l'altezza minima impostata in .navbar in questo modo:

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

Modificare l'altezza di un elemento a qualcosa di più piccolo dell'altezza minima non farà differenza ...

se stai usando la sorgente less, dovrebbe esserci una variabile per l'altezza della barra di navigazione nel variables.lessfile. Se non stai utilizzando il sorgente, puoi personalizzarlo utilizzando l' utilità di personalizzazione fornita dal sito di bootstrap. E poi puoi scaricarlo e includerlo nel tuo progetto. La variabile che stai cercando è:@navbar-height

Questa è la mia esperienza

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

Se state generando i vostri fogli di stile con LESS / SASS e importate Bootstrap lì, ho scoperto che l'override della variabile @ navbar-height consente di impostare l'altezza della barra di navigazione, che è originariamente definita nel file variables.less.

Volevo aggiungere i miei 2 pence e un grazie a James Poulose per la sua risposta originale è stata l'unica che ha funzionato per il mio particolare progetto (MVC 5 con l'ultima versione di Bootstrap 3).

Questo è principalmente rivolto ai principianti, per chiarezza e per rendere più facili le modifiche future ti suggerisco di aggiungere una sezione in fondo al tuo file CSS per il tuo progetto, ad esempio mi piace fare questo:

/* Bootstrap overrides */

.some-class-here {
}

Prendendo la risposta di James Poulose sopra, ho fatto questo:

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

Ho modificato i valori di riempimento superiore per spingere il testo verso il basso sul mio elemento della barra di navigazione. Puoi praticamente sovrascrivere qualsiasi elemento Bootstrap come questo ed è un buon modo per apportare modifiche senza rovinare le classi base Boostrap perché l'ultima cosa che vuoi fare è apportare una modifica lì e poi perderla quando hai aggiornato Bootstrap!

Infine, per una separazione ancora maggiore, mi piace dividere i miei file CSS e utilizzare le dichiarazioni @import per importare i tuoi file secondari in un file CSS principale per una facile gestione, ad esempio:

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

nota : se stai estraendo più file devi assicurarti che vengano caricati nell'ordine corretto.

Spero che questo aiuti qualcuno.

Penso che possiamo scrivere questo meno stili, senza cambiare il colore esistente. Quanto segue ha funzionato per me (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; }

L'ultimo ("navbar-brand") è effettivamente necessario solo se hai del testo come nome "brand".

Ho avuto lo stesso problema, l'altezza della mia barra dei menu fornita da bootstrap era troppo grande, in realtà ho scaricato un bootstrap sbagliato, finalmente sbarazzarmene scaricando il bootstrap originale da questo sito .. http://getbootstrap.com/2.3 .2 / voglio usare bootstrap in yii (netbeans) segui questo tutorial, https://www.youtube.com/watch?v=XH_qG8gphaw ... La voce non è presente ma i passaggi sono lenti puoi facilmente capire e implementare loro. Grazie