Question

通过移动设备或桌面放大访问时，下拉菜单切换按钮不起作用。似乎没有可点击，因为点击或触摸时没有任何反应。

我已尝试在其他问题上找到一些解决方案，即使是旧版本的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;
}

Answer 1

在包含bootstrap.min.js之前，您需要包含jQuery。

所以在bootstrap之后包括：

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

解释here。

Bootstrap 3.3.2导航栏下拉菜单切换在移动设备或桌面上无法点击

1 个答案: