Hauteur décroissante de la barre de navigation bootstrap 3.0

J’essaie de diminuer la hauteur de la barre de navigation bootstrap 3.0 qui est utilisée avec le comportement top fixe. Ici, j’utilise le code.

HTML

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

Résultat

entrer la description de l'image ici

À l’écran, la barre de navigation diminue, mais la hauteur ne diminue pas. la hauteur d’origine est indiquée en rose.

Au-dessus du script css fonctionne bien dans le bootstrap 2. *

Est-il possible de diminuer la hauteur correctement?

Après quelques heures, l’ajout de la classe css suivante a résolu mon problème.

Travailler avec Bootstrap 3.0. *

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

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

Mettre à jour Code complet pour personnaliser et diminuer la hauteur de la barre de navigation avec la capture d’écran.

entrer la description de l'image ici

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

Code d’utilisation:

  

Solution de travail:

Bootstrap 3.0 possède par défaut un rembourrage de 15px en haut et en bas, il suffit donc de le remplacer!

Par exemple:

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

Il suffit de remplacer la hauteur minimale définie dans .navbar comme suit:

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

Modifier la hauteur des éléments à une hauteur inférieure à la hauteur minimale ne fera aucune différence …

Si vous utilisez la source moins, il devrait y avoir une variable pour la hauteur de la barre de navigation dans le fichier variables.less . Si vous n’utilisez pas la source, vous pouvez la personnaliser à l’aide de l’utilitaire de personnalisation fourni par le site de bootstrap. Et puis vous pouvez le télécharger et l’inclure dans votre projet. La variable que vous recherchez est: @navbar-height

Ceci est mon expérience

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

changer la hauteur de navabr à 38px

Le seul moyen qui fonctionne pour moi est expliqué à ce lien: Comment diminuer la hauteur de la barre de navigation dans Bootstrap 3?

Il diminue la hauteur de la barre de navigation avec seulement deux lignes de code

Si vous générez vos feuilles de style avec LESS / SASS et que vous y importez Bootstrap, j’ai trouvé que le remplacement de la variable @ navbar-height vous permet de définir la hauteur de la barre de navigation, définie à l’origine dans le fichier variables.less.

entrer la description de l'image ici

Je pense que nous pouvons écrire moins de styles, sans changer la couleur existante. Ce qui suit a fonctionné pour moi (dans 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; } 

Le dernier (‘navbar-brand’) n’est en fait nécessaire que si vous avez du texte comme nom de marque.

Voulant append mon 2 pence et un merci à James Poulose pour sa réponse originale, c’était le seul qui fonctionnait pour mon projet particulier (MVC 5 avec la dernière version de Bootstrap 3).

Ceci est principalement destiné aux débutants, pour plus de clarté et pour faciliter les futures modifications, je vous suggère d’append une section au bas de votre fichier CSS pour votre projet par exemple, j’aime faire ceci:

 /* Bootstrap overrides */ .some-class-here { } 

En prenant la réponse de James Poulose ci-dessus, j’ai fait ceci:

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

J’ai changé les valeurs de remplissage pour pousser le texte sur mon élément de barre de navigation. Vous pouvez pratiquement remplacer n’importe quel élément Bootstrap comme celui-ci et c’est un bon moyen de faire des changements sans foirer les classes de base Boostrap car la dernière chose que vous voulez faire est de la modifier et de la perdre lorsque vous mettez à jour Bootstrap!

Enfin, pour encore plus de séparation, j’aime diviser mes fichiers CSS et utiliser les déclarations @import pour importer vos sous-fichiers dans un fichier CSS principal pour une gestion facile, par exemple:

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

Remarque : si vous importez plusieurs fichiers, vous devez vous assurer qu’ils sont chargés dans le bon ordre.

J’espère que cela aide quelqu’un.

J’ai eu le même problème, la hauteur de ma barre de menu fournie par bootstrap était trop grande, en fait, j’ai téléchargé un mauvais bootstrap, finalement je l’ai éliminé en téléchargeant le bootstrap original de ce site. http://getbootstrap.com/2.3 .2 / veux utiliser le bootstrap dans yii (netbeans) suivez ce tutoriel, https://www.youtube.com/watch?v=XH_qG8gphaw … La voix est absente mais les étapes sont lentes, vous pouvez facilement comprendre et implémenter leur. Merci