Diminution de la hauteur 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 un comportement supérieur fixe. Ici, j'utilise du 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;}

Résultat

À partir de l'écran, il montre, la barre de navigation a diminué en sortie mais la hauteur ne diminue pas. la hauteur d'origine est indiquée en rose.

Le script css ci-dessus fonctionne presque bien dans bootstrap 2. *

Existe-t-il un moyen de diminuer la hauteur correctement.

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

Travaillez 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 le code complet pour personnaliser et réduire la hauteur de la barre de navigation avec une capture d'écran.

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:

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

Solution de travail:

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

Par exemple:

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

Remplacez simplement la hauteur minimale définie dans .navbar comme ceci:

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

Modifier la hauteur d'un élément à quelque chose de plus petit que la hauteur minimale ne fera aucune différence ...

si vous utilisez la source less, il devrait y avoir une variable pour la hauteur de la barre de navigation dans le variables.lessfichier. 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

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

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

Je voulais ajouter mes 2 pence et un merci à James Poulose pour sa réponse originale, c'était la seule 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'ajouter une section en bas de votre fichier CSS pour votre projet par exemple j'aime faire ceci:

/* Bootstrap overrides */

.some-class-here {
}

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 padding-top pour pousser le texte vers le bas sur mon élément navbar. Vous pouvez à peu près remplacer n'importe quel élément Bootstrap comme celui-ci et c'est un bon moyen d'apporter des modifications sans bousiller les classes de base Boostrap, car la dernière chose que vous voulez faire est d'y apporter un changement, puis de le perdre lorsque vous avez mis à 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 seul fichier CSS principal pour une gestion facile par exemple:

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

Remarque : si vous tirez plusieurs fichiers, vous devez vous assurer qu'ils se chargent dans le bon ordre.

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

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

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 bootstrap erroné, enfin éliminez-le en téléchargeant le bootstrap orignal depuis ce site .. http://getbootstrap.com/2.3 .2 / souhaitez utiliser bootstrap dans yii (netbeans) suivez ce tutoriel, https://www.youtube.com/watch?v=XH_qG8gphaw ... La voix n'est pas présente mais les étapes sont lentes que vous pouvez facilement comprendre et implémenter leur. Merci