Bootstrap 3.3.2 navbar dropdown menu toggle not clickable on mobile or desktop

问题

When accessing via mobile devices or desktop zooming in, the dropdown menu toggle button doesn't work. It is not clickable, it seems, as nothing happens when clicking or touching.

I've tried some solutions found on other questions, even for older versions of bootstrap but nothing worked. Thanks.

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;
}

回答1:

You need to include jQuery before including bootstrap.min.js.

So after bootstrap include:

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

Explained here.

来源：https://stackoverflow.com/questions/29463614/bootstrap-3-3-2-navbar-dropdown-menu-toggle-not-clickable-on-mobile-or-desktop

标签

twitter-bootstrap

responsive-design

navbar