2015-04-05 54 views
0

当通过移动设备或桌面放大访问时,下拉菜单切换按钮不起作用。它看起来不可点击,因为点击或触摸时没有任何反应。Bootstrap 3.3.2 navbar下拉菜单在手机或桌面上不可点击

我已经尝试了一些解决方案,发现其他问题,即使是旧版本的bootstrap,但没有任何工作。谢谢。

HTML

<head> 
    <meta charset="UTF-8"> 
    <script src="{% static '/static/bootstrap-3.3.2/js/bootstrap.min.js' %}"></script> 
    <link rel="stylesheet" href="{% static '/static/bootstrap-3.3.2/css/bootstrap.min.css' %}"> 
    <link rel="stylesheet" href="{% static '/static/css.css' %}"> 
    <link rel="stylesheet" type="text/css" href="{% static '/static/css-mobile.css' %}" media="only screen and (max-width: 767px)" /> 
    <meta charset="UTF-8"> 
</head> 

<header class="masthead"> 
    <div id="header-child"> 
    <div id="header-2"> 
      <img id="logo" src="{% static '/static/decidiu.gif' %}" width="275" height="65"> 
    </div> 
    </div> 
<nav role="navigation" class="navbar navbar-default navbar-static-top" id="menu"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a href="/" class="navbar-brand" href="#">Placeholder.com.br</a> 
     </div> 
     <!-- Collection of nav links and other content for toggling --> 
     <div id="navbarCollapse" class="collapse navbar-collapse"> 
      <ul class="nav navbar-nav"> 
       <li><a href="/perguntar/">Pedir sugestão</a></li> 
       <li><a href="/celulares/">Celulares</a></li> 
       <li><a href="/tvs/">TVs</a></li> 
       <li><a href="/pcs/">PCs</a></li> 
       <li><a href="/notebooks/">Notebooks</a></li> 
       <li><a href="/tablets/">Tablets</a></li> 
       <li><a href="/outros/">Outros</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       {% if user.is_authenticated %} 
       <p class="navbar-text">Logado como: <a href="/perfil/" style="color:white;"><b>{{ user.username }}</b></a>.<a href="/logout/" style="color:white;"> Sair</a></p> 
       {% else %} 
       <li><a href="/login/">Login</a></li> 
       <li><a href="/accounts/signup/">Registrar</a></li> 
       {% endif %} 
      </ul> 
     </div> 
    </div> 
</nav> 
</header> 

CSS

.navbar-default { 
    background-color: #2989d8; 
    border-color: #2989d8; 
    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.75); 
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.75); 
} 
.navbar-default .navbar-brand { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { 
    color: #dddddd; 
} 
.navbar-default .navbar-text { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-nav > li > a { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
    color: #dddddd; 
} 
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { 
    color: #dddddd; 
    background-color: #2989d8; 
} 
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { 
    color: #dddddd; 
    background-color: #2989d8; 
} 
.navbar-default .navbar-toggle { 
    border-color: #2989d8; 
} 
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { 
    background-color: #2989d8; 
} 
.navbar-default .navbar-toggle .icon-bar { 
    background-color: #ecf0f1; 
} 
.navbar-default .navbar-collapse, 
.navbar-default .navbar-form { 
    border-color: #ecf0f1; 
} 
.navbar-default .navbar-link { 
    color: #ecf0f1; 
} 
.navbar-default .navbar-link:hover { 
    color: #dddddd; 
} 

回答

0

您需要包括bootstrap.min.js之前,包括jQuery的。

引导打完包括:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 

解释here

相关问题