Bootstrap导航栏折叠菜单无法通过https

我使用Bootstrap 3.3.2与Django 1.8.8来构建我的网站。我正在使用mod-wsgi 4.4.23版和Apache 2.2.15在CentOS虚拟机上进行部署。Bootstrap导航栏折叠菜单无法通过https

我有一个导航栏固定在顶部，有一个可折叠的注册菜单。当我通过http连接到网站并点击菜单时，列出了下拉菜单项。但是，当我通过https连接并执行相同操作时，下拉菜单项不会显示。当视口缩小时单击最小化的导航栏菜单项时会发生同样的情况。

可能会出现什么问题？

的基本模板代码是在这里：

<!DOCTYPE html> 
<html lang="en"> 

{% load staticfiles %} 

<head> 
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 
<link rel="icon" href="../../favicon.ico"> 

<title>Title</title> 


<!-- Bootstrap core CSS --> 
<link href="{% static 'bootstrap-3.3.2-dist/css/bootstrap_cerulean.min.css' %}" rel="stylesheet" /> 


<!-- Custom styles for this template --> 
<link href="{% static 'bootstrap-3.3.2-dist/css/custom_cerulean.css' %}" rel="stylesheet" /> 

<!-- Load Javascript files --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="{% static 'bootstrap-3.3.2-dist/js/bootstrap.min.js' %}"></script> 
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
<!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
<![endif]--> 
</head> 

<body> 
<nav 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 class = "navbar-brand" href="/"> 
     <img style="width:auto; height:160%;" src="{% static "logo.jpg" %}"> 
    </a> 
    {% if user.is_authenticated %} 
    <a class = "navbar-brand" href="{% url 'myapp:profile' %}"> 
     <span class="glyphicon glyphicon-home"></span> 
    </a> 
    {% endif %} 
    </div><!--/.navbar-header --> 

    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-left"> 
     {% if not user.is_authenticated %} 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> Sign Up</a> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="/myapp/accounts/signup_employer">New Employer</a></li> 
       <li><a href="/myapp/accounts/signup_employee">New Employee</a></li> 
      </ul> 
     </li> 
     {% endif %} 
     <li> 
     {% if not user.is_authenticated %} 
     <a href="/myapp/accounts/login"> Login</a> 
     {% else %} 
     <a href="/myapp/accounts/logout"> Logout</a> 
     {% endif %} 
     </li> 
     {% if user.is_authenticated %} 
     <li> 
     <a href="/myapp/accounts/password_change"> Change Password</a> 
     </li> 
     <li> 
     <a href="/myapp/">MyApp</a> 
     </li> 
     {% endif %} 
     </ul><!--/.navbar-left --> 

     <ul class="nav navbar-nav navbar-right"> 
     <li> 
     <a href="/about_us"> About Us</a> 
     </li> 
     <li> 
     <a href="/contact_us"> Contact Us</a> 
     </li> 
     </ul><!--/.navbar-right --> 

    </div><!--/.navbar-collapse --> 
</div><!--/.container --> 
</nav>

来源

2016-03-07 Tanuka

如果您有任何错误，您可以在浏览器的“开发工具”>“网络选项卡”中检查吗？ – AKS

这个调用加载jQuery的http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"是一个HTTP地址。当您转到HTTPS时，您的浏览器可能无法加载它。这会打破各种事情。

此外，您还有一些字体在http：//地址。最简单的解决方法是以//作为前缀。

右键单击并检查，在大多数浏览器中，您将看到Dev Tools中的错误。

来源

2016-03-07 06:39:02 tempranova

谢谢！就是这样。我将所有http：//替换为// – Tanuka

Bootstrap导航栏折叠菜单无法通过https

回答

相关问题