bootstrap effondrement menu disparaît lors d'un redimensionnement de l'écran
J'ai utilisé bootstrap menu pour mon application. Il ressemble à ceci:
mais quand je change la taille de la fenêtre pour les plus petits, il disparaît ressemble à ceci:
Il disparaît quand il est sur le ~965px à l'échelle (si c'est probablement 979px). J'ai essayé cette solution, n'a pas fonctionné. Peut-être que je suis un mélange de bootstrap 2 et 3?
C'est mon code de menu:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">Digrin</a>
<div class="nav-collapse collapse">
<ul class="nav">
{{ request.path }}
<li{% block nav_stocks %}{% endblock %}><a href="/stocks/">Stocks</a></li>
<li{% block nav_mystocks %}{% endblock %}>
<a href="/stocks/mystocks">My Portfolio</a></li>
<li{% block nav_watchstocks %}{% endblock %}>
<a href="/stocks/watchstocks">Watcher</a></li>
{% if not user.is_authenticated %}
<li class="active"><a href="/accounts/login/?next=/stocks/">Login</a></li>
<li><a href="/accounts/register/">Register</a></li>
{% else %}
<ul class="nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
{{ user.username }}
<i class="caret"></i>
</a>
<ul class="dropdown-menu">
<li><a href="/accounts/password/change/">Change password</a></li>
{% if user.is_staff %}<li><a href="/admin">Admin</a></li>{% endif %}
<li><a href="/accounts/logout/?next=/stocks/">Logout</a></li>
</ul>
</li>
</ul>
{% endif %}
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
comprend:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="{% static "css/bootstrap.css" %}" rel="stylesheet">
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="{% static "css/bootstrap-responsive.css" %}" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="{% static "js/jquery-1.8.1.min.js" %}" type="text/javascript"></script>
<script src="{% static "js/bootstrap.min.js" %}" type="text/javascript"></script>
Et site (loin d'être fini)
Si je zoom, menu disparaît ainsi.
OriginalL'auteur Lucas03 | 2013-11-26
Vous devez vous connecter pour publier un commentaire.
Si vous ne voulez pas que votre barre de navigation de liens s'est effondré sur des appareils plus petits, alors vous avez besoin pour retirer le
<div class="nav-collapse collapse">
élément.La structure de base devrait ressembler à quelque chose comme ça....
Si vous voulez garder de la réactivité de la fonctionnalité, puis ajoutez le code ci-dessous à l'intérieur de vous
container
div. Cela vous donnera un bouton pour activer le menu réduit sur les petits appareils.Alors le résultat final devrait ressembler à quelque chose comme ça.
Aussi, vous n'avez pas à nest un
<ul class="nav">
élément au sein d'un<ul class="nav">
élément pour les menus déroulants. La structure correcte pour vous des éléments de navigation devrait ressembler à ceci.Suggestion : ajouter de la classe navbar-nav pour l'ul dans le premier code Sinon, le <li> va prendre toute la place
OriginalL'auteur Schmalzy