Est-il un moyen de changer le Bootstrap barre de navigation de la Hauteur?
Je suis de la conception d'un site web à l'aide de Twitter Bootstrap, et j'ai du mal avec le réactif barre de navigation. Dans le bootstrap, la barre de navigation permet à un mobile utilisateur de cliquer sur une icône pour étendre la barre de navigation et l'affichage des liens de navigation. Je suis incapable de trouver comment régler la hauteur maximale... quand je l'ai essayer et d'utiliser un seul de la liste déroulante, les bars, la barre de navigation ne change pas de taille en conséquence, et l'utilisateur est incapable de voir les liens.
Merci pour toute aide que vous pouvez fournir.
-Un
EDIT: voici le code que j'utilise pour la barre de navigation en html et le css que j'utilise est la norme de bootstrap.css et bootrstrap réactif.css:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="http://example.com">organization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li class="active"><a href="contact.html">Contact</a></li>
<li><a href="nowplaying.html">Now Playing</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Public Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="public.html#observatory">Observatory</a></li>
<li><a href="public.html#planetarium">Planetarium</a></li>
<li class="divider"></li>
<li class="nav-header">For Teachers and Schools</li>
<li><a href="schools.html#programs">Programs</a></li>
<li><a href="schools.html#events">Host an Event</a></li>
<li><a href="schools.html#education">Educational Initiatives</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Undergraduate Resources <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="students.html#observatory">Observatory</a></li>
<li><a href="students.html#planetarium">Planetarium</a></li>
<li class="divider"></li>
<li class="nav-header">Physics</li>
<li><a href="xxx.com">Physics Homepage</a></li>
<li><a href="xxx.com">Physics and Astronomy</a></li>
</ul>
</li>
<li><a href="volunteer.html">Volunteer</a></li>
<li><a href="faq.html">FAQ</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
- merci de poster votre code
- vient de poster.. est que tout ce que vous aimeriez voir?
Vous devez vous connecter pour publier un commentaire.
Par défaut la barre de navigation de code html est le suivant:
Et si vous examinez la barre de navigation de l'élément que vous trouverez à l'intérieur de la div (navbar-inner) a la classe:
Vous pouvez supprimer cette valeur et de trouver que la barre de navigation reste la même hauteur, c'est normal, car la hauteur de la barre de navigation est réglé sur "auto". Par conséquent, si vous supprimez le
min-height
la hauteur dépendra du lien les balises de rembourrage, à l'intérieur de la<ul></ul>
, et la<a class="brand"></a>
rembourrage ainsi.Si vous en changez, vous trouverez que la hauteur de la "barre de navigation" parent changera automatiquement. Vous pouvez également maintenir la
min-height
bien et il suffit de changer sa valeur, en ajustant le rembourrage des éléments que j'ai mentionnés ci-dessus.Pour la réponse de la partie, vous pouvez modifier tous les styles de l'
bootstrap-responsive.css
, à l'intérieur du média spécifique de requête pour la résolution que vous souhaitez modifier.EDIT: Viens de voir votre code HTML, vérifier le remplissage de votre lien de balises à l'intérieur de la barre de navigation, à le réduire, changer la
.navbar-inner
min-height
trop, et de jouer avec les valeurs.max-height
ou similaire attribut... des idées?Ok, la façon dont j'ai corrigé la première partie (ayant un en-tête qui n'a pas redimensionner quand j'ai voulu l') a été par la modification de la largeur min valeur dans le bootstrap-responsive.css comme ceci:
où
1200px
a été changé pour 1200 à partir de 980. Tricky tricky... pour l'anecdote, c'est sur la ligne de 1104.