Hauteur décroissante de bootstrap 3.0 barre de navigation
J'essaie de diminuer bootstrap 3.0 hauteur de la barre de navigation qui est utilisée avec un comportement supérieur fixe. Ici, j'utilise le 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
Sur l’écran, la barre de navigation a diminué en sortie mais la hauteur n’a pas diminué. La hauteur d'origine est indiquée en rose.
Le script ci-dessus fonctionne presque bien dans bootstrap 2. *
Est-il possible de réduire la hauteur correctement?.
Après avoir passé 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;}
Mise à jour 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 par défaut a un padding 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}
Remplacez simplement la hauteur minimale définie dans .navbar comme suit:
.navbar{
min-height:20px; //* or whatever height you require
}
Modifier la hauteur des éléments en un paramètre inférieur à 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 fichier variables.less. Si vous n'utilisez pas la source, vous pouvez la personnaliser à l'aide de l'utilitaire personnaliser fourni par le site de bootstrap. Et ensuite, 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;}
La seule façon qui a fonctionné pour moi est expliquée à ce lien: Comment diminuez-vous 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 importez Bootstrap ici, j'ai constaté que le fait de remplacer la variable @ navbar-height permet de définir la hauteur de la barre de navigation, définie à l'origine dans la fichier variables.less.
Voulais ajouter mes 2 pence et un merci à James Poulose pour sa réponse originale, c’est le seul qui ait fonctionné 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 au bas de votre fichier CSS pour votre projet. Par exemple, j'aime bien 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 padding-top en Push le texte vers le bas sur mon élément de barre de navigation. Vous pouvez très bien 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 de Boostrap, car la dernière chose que vous voulez faire est de faire un changement, puis de le perdre quand vous avez mis à jour Bootstrap!
Enfin, pour 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 faciliter la gestion, par exemple:
@import url('css/mysubcssfile.css');
note: si vous insérez plusieurs fichiers, vous devez vous assurer qu'ils se chargent dans le bon ordre.
J'espère que ça 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 un 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, j'ai en fait téléchargé un mauvais bootstrap, enfin je m'en débarrasse en téléchargeant l'orignal bootstrap de celui-ci site .. http://getbootstrap.com/2.3.2/ voulez 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, vous pouvez facilement les comprendre et les mettre en œuvre. Merci