web-dev-qa-db-fra.com

Comment diminuez-vous la hauteur de la barre de navigation dans Bootstrap 3?

Je veux que ma barre de navigation dans BS3 soit de hauteur 20px. Comment puis-je faire cela?

J'ai essayé ce qui suit:

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

N'a rien fait.

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

Semble pouvoir augmenter la taille de la barre, mais ne peut pas diminuer.

Quel est un bon moyen de le faire tout en préservant l'alignement du conteneur, etc.

csstwitter-bootstrap
53
Rolando

bootstrap avait 15px top padding et 15px bottom padding sur .navbar-nav > li > a; vous devez donc le diminuer en le remplaçant dans votre fichier CSS et .navbar à min-height:50px; le diminuer autant que vous le souhaitez.

par exemple 

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

ajoutez ces classes à votre css puis vérifiez.

104
Minder Saini

L'exemple ci-dessus de Minder Saini fonctionne presque, mais le .navbar-brand doit également être réduit. 

Un exemple de travail (l’utiliser sur mon propre site) avec 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 ... Pour que cet exemple fonctionne également sur mobile, vous devez modifier le style de la bascule Navbar comme suit

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

Au lieu de <nav class="navbar ..., utilisez <nav class="navbar navbar-xs...

et ajoutez ces 3 lignes de 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; }

Sortie : 

enter image description here

24
Yasser

La réponse ci-dessus a bien fonctionné (MVC5 + Bootstrap 3.0), mais la hauteur est revenue à la valeur par défaut une fois le bouton de la barre de navigation affiché (très petit écran). J'ai dû ajouter ce qui suit dans mon fichier .css pour résoudre ce problème également.

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

Pour Bootstrap 4
Certaines des réponses précédentes ne fonctionnent pas pour Bootstrap 4. Pour réduire la taille de la barre de navigation dans cette version, je suggère d'éliminer le remplissage de ce type.

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

Vous pouvez aussi essayer d'autres styles.
Les styles que j'ai trouvés qui définissent la hauteur totale de la barre de navigation sont les suivants:

  • padding-top et padding-bottom sont définis à 0.5rem pour .navbar.
  • padding-top et padding-bottom sont définis à 0.5rem pour .navbar-text.
  • à part un line-height de 1.5rem hérité de la body.

Au total, la barre de navigation correspond à 3,5 fois la taille de la police racine.

Dans mon cas, j'utilisais de grandes tailles de police; J'ai redéfini la classe ".navbar" dans mon fichier CSS comme ceci:

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

Commentaire final, évitez d'utiliser des valeurs absolues lorsque vous jouez avec les styles précédents. Utilisez plutôt les unités rem ou em.

1
ePi272314

Si vous avez un seul navigateur et que vous voulez le changer, vous devriez changer vos variables.less: @navbar-height (quelque part près de la ligne 265, je ne me souviens plus du nombre de lignes que j'ai ajoutées au mien).

Ceci est référencé par le mixin .navbar-vertical-align, qui est utilisé par exemple pour positionner l'élément "bascule", n'importe quoi avec .navbar-form, .navbar-btn, et .navbar-text.

Si vous avez deux barres de navigation et que vous voulez qu'elles soient de hauteurs différentes, La réponse de Minder Saini peut fonctionner assez bien, une fois qualifié par un, par exemple, #topnav.navbar, mais doit être testé sur plusieurs largeurs de périphérique.

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