Bootstrap menu (nav) de l'effondrement à l'horizontale au lieu de verticale
je suis en utilisant ce code Html /css et le menu ("bootstrap" nav ) et il est toujours horizontale sur un petit écran /appareil mobile. que je veux qu'il /besoin d'elle pour être à la verticale.je suis en utilisant bootstrap 3.2
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="home/index" class="navbar-brand">
<img src="../../Images/Logo.gif" alt="" class=" left img-rounded img-responsive noborder " />
</a>
</div>
<div class="collapse navbar-collapse ">
<ul class="nav navbar-right nav-pills navbar-right ">
<li>@Html.ActionLink("1", "Index", "ContactUs")</li>
<li>@Html.ActionLink("2", "Allpictuers", "Home")</li>
<li>@Html.ActionLink("3", "Index", "Courses")</li>
<li>@Html.ActionLink("4", "Events", "Home")</li>
<li>@Html.ActionLink("5", "OurStafMembers", "Home")</li>
<li>@Html.ActionLink("6", "Index", "Abouts")</li>
<li>@Html.ActionLink("7", "Index", "Home")</li>
<li>@Html.ActionLink("8", "Index", "English")</li>
@*<li>>@Html.ActionLink("Thisis _Layout", "Index", "English")</li>*@
@if (User.Identity.IsAuthenticated)
{
<li> @Html.Partial("_LoginPartial")</li>
<li>@Html.ActionLink("Admin", "Index", "admin")</li>
}
</ul>
</div>
C'est le rendu Html:
/...
<ul class="nav navbar-right nav-pills ">
<li><a href="/ContactUs">1</a></li>
<li><a href="/Home/Allpictuers">2</a></li>
<li><a href="/Courses">3</a></li>
<li><a href="/Home/Events">4</a></li>
<li><a href="/Home/OurStafMembers">5</a></li>
<li><a href="/Abouts">6</a></li>
<li><a href="/">7</a></li>
<li><a href="/English">8</a></li>
</ul>
</div>
</div>
</div>
- Ce qui, exactement, est à l'horizontale? S'il vous plaît montrer une démo ou au moins une capture d'écran.
- tous les liens (1,2,3, ect ) sont de l'affichage horizontal sur un petit écran (au lieu de la verticale )
- J'ai ajouté une image à l'original de mes Q.
- S'il vous plaît montrer rendu HTML et pas votre code côté serveur. Bootstrap ne se soucie pas de cela.
- quelle est la taille de l'image depuis la taille par défaut est de 50px de la hauteur?
- L'image est de 100 px, mais j'ai le même problème avec ou sans l'image
Vous devez vous connecter pour publier un commentaire.
Mise à JOUR: (Utiliser
<ul class="nav navbar-nav">
au lieu de nav-pills et les amis.)Il suffit d'ajouter la classe
nav-stacked
vous avez également
navbar-right
deux fois.. supprimerBootstrap nav liens sont empilées par défaut pour les mobiles. Ma meilleure supposition est que votre rendu HTML ne dispose pas d'ancres à l'intérieur les éléments de la liste. Bootstrap utilise les ancres comme CSS cibles, et non pas les éléments de la liste.
Si le résultat ressemble à ce qu'il fonctionne comme prévu, avec aucun changement:
Démo