Diminution de la hauteur de la barre de navigation bootstrap 3.0


108

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

entrez la description de l'image ici

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


Plus besoin de <div class = "navbar-inner"> dans Bootstrap 3
Bartek S

navbar-inner est ma classe personnalisée. non lié à bootstrap 3.0.
irfanmcsd

La seule façon qui a fonctionné pour moi est expliquée à ce lien: stackoverflow.com/questions/19576175/... Il diminue la hauteur de la barre de navigation avec seulement deux lignes de code
giovannim

Réponses:


124

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.

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

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

4
cela ne fonctionne pas ... vérifiez ma réponse sur cette page ... la hauteur min pour .navbar est définie sur 50px par défaut, donc si vous définissez la hauteur sur 28px, elle sera remplacée par la hauteur min de 50px. ..
patrick

3
Ah, je vois que ce post a été édité (beaucoup!) Et montre maintenant en effet le bon code. Je vois également le réglage de la hauteur minimale que j'ai suggéré dans mon message ici qui, pour une raison quelconque, a obtenu un vote négatif. C'est très frustrant d'être critiqué pour une réponse correcte, sur le sujet et claire ...
patrick

@patrick ne sais pas ce que vous voulez dire, mais à l'époque, mon problème a été résolu avec ma propre réponse. la réputation n'a aucune question, si les gens me donnent le vote vers le haut ou vers le bas.
irfanmcsd

1
La modification de la source aurait rendu cela plus facile
Luke

C'est drôle, ça n'a pas marché pour moi. J'ai dû remplacer la hauteur fixe de 50px;
Kevin le

43

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}

La valeur par défaut est 10px dans bootstrap.css? .navbar-nav> li> a {padding-top: 10px; rembourrage en bas: 10px; hauteur de ligne: 20px; }
jichi

1
Consultez le numéro de ligne 3884 dans bootstrap.css (v3.0.2). C'est .navbar-nav > li > a {padding-top: 15px; padding-bottom: 15px;}par défaut.
Ranveer

Pas sûr de la v3.0.2. Mais dans la ligne v3.0.3 4541 dans bootstrap.css, c'est: .navbar-nav> li> a {padding-top: 10px; rembourrage en bas: 10px; hauteur de ligne: 20px; }
jichi

Vous, monsieur, êtes mon héros.
orokusaki

40

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


comme vous le voyez dans la barre de navigation, j'utilise déjà la propriété height mais sans effet.
irfanmcsd

c'est la propriété min-height, pas la hauteur ... si vous définissez la hauteur sur un nombre inférieur à la min-height, la min-height l'empêchera de devenir plus petite ...
patrick

7
Pourquoi cela obtient-il un vote négatif? C'est une solution de travail pour le problème défini dans cet article. Un modérateur peut-il regarder cela s'il vous plaît, il semble y avoir un vote négatif qui ne fait que voter contre des choses avec lesquelles il n'est pas d'accord sans vérifier la réponse réelle. Un lien posté plus de 2,5 mois après mon message a la même réponse, est sur un lien externe et a obtenu deux votes positifs. Je déteste quand les gens diluent SO avec des votes négatifs aléatoires!
patrick

Je me suis souvent demandé comment les gens avaient maintenant un vote défavorable, recevez-vous une notification? Impossible de trouver ceci sur meta
Iulian Onofrei

5
pas de notification ... il semble que les gens donnent des votes négatifs s'ils pensent qu'une autre réponse est meilleure ou quelque chose du genre ... je ne sais pas ... Dans ce cas, le gars qui pose la question a pris ma réponse dans sa propre réponse et a accepté cette réponse. . Un peu boiteux si vous me demandez ... Mais là encore, ce site n'est pas une question d'ego, il s'agit d'aider les autres ...
patrick

27

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


1
mais je ne veux pas changer le comportement d'origine de la barre de navigation. Je change juste la hauteur pour une barre de navigation supérieure supplémentaire.
irfanmcsd

2
Je pense que c'est la meilleure solution.
Imtiaz

1
C'est cette meilleure solution si vous n'avez qu'une seule navigation sur le site et qu'elle devrait être à cette hauteur. Si vous avez plusieurs navs, cela devient un peu plus difficile, car .navbar-vertical-align est utilisé à plusieurs endroits et a une référence difficile à @ navbar-height.
Carl Bussema

belle solution. tant que vous ne prévoyez pas d'utiliser CDN
eagor

1
Tant que vous utilisez des remplacements dans un moins partiel séparé, c'est la meilleure solution et devrait vous permettre de mettre à niveau le bootstrap sans problème.
Ken Prince

9

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

changer la hauteur de navabr à 38px


Ajoutez ceci pour prendre soin de .navbar-form:.navbar .navbar-form { margin-top: 2px; margin-bottom: 0px }
steph643

Une autre extension: .navbar .navbar-text {margin-top: 0px; margin-bottom: 0px; hauteur de ligne: 38px; }
cnmuc

3

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.

entrez la description de l'image ici


3

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.


2

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


Bonne réponse, c'est la seule qui a fonctionné pour moi avec la dernière version de Bootstrap 3 (une note: si vous voulez pousser votre texte vers le bas, augmentez la valeur de padding-top pour .navbar-brand class ainsi que .navbar-nav> li> a cours.
Tahir Khalid

0

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


Qu'avez-vous modifié dans le code pour obtenir l'effet souhaité? Si vous pointez vers un lien dans une réponse, vous devez résumer la solution.
Brian
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.