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 le bon moyen de le faire tout en préservant l’alignement du conteneur, etc.

bootstrap avait un remplissage supérieur de 15px et un remplissage inférieur de .navbar-nav > li > a sur .navbar-nav > li > a donc vous avez besoin de le diminuer en le .navbar dans votre fichier css et .navbar a min-height:50px; Diminuez le autant que vous voulez.

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.

L ‘exemple de Minder Saini ci – dessus fonctionne presque, mais la .navbar-brand doit également être réduite.

Un exemple de travail (en l’utilisant 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 barre de navigation comme suit:

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

Au lieu de

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 :

entrer la description de l'image ici

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û append le ci-dessous dans mon fichier .css pour résoudre ce problème.

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

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 comme ceci.

 .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 sur 0.5rem pour .navbar .
  • padding-top et padding-bottom sont définis sur 0.5rem pour .navbar-text .
  • outre une line-height de line-height de 1.5rem héritée du body .

Ainsi, la barre de navigation représente au total 3,5 fois la taille de la police racine.

Dans mon cas, que 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; } 

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

Si vous ne possédez qu’un seul navigateur et que vous souhaitez le modifier, vous devez 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 mixin .navbar-vertical-align , qui est utilisé par exemple pour positionner l’élément “toggle”, n’importe quoi avec .navbar-form, .navbar-btn, et .navbar-text .

Si vous avez deux barres navales et que vous souhaitez qu’elles aient des hauteurs différentes, la réponse de Minder Saini peut fonctionner assez bien, si elle est qualifiée par exemple par #topnav.navbar mais doit être testée sur plusieurs largeurs de périphérique.

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

Modifiez simplement la hauteur de la barre de navigation 50px par défaut en l’incluant dans vos remplacements de variables.

Vous pouvez trouver cette hauteur de barre par défaut sur les lignes 365 et 360 sur les variables SASS et LESS du bootstrap, respectivement.