Question

我正在使用Bootstrap 3.3.2和Django 1.8.8来构建我的网站。我正在使用mod-wsgi版本4.4.23和Apache 2.2.15在CentOS VM上部署它。

我将导航栏固定在顶部，并带有可折叠的注册菜单。当我通过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>

Answer 1

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

此外，您在http：//地址处有一些字体。最简单的修复方法是使用//。

作为前缀

右键单击并检查，在大多数浏览器中，您都会在开发工具中看到错误。

Bootstrap导航栏折叠菜单不适用于https

1 个答案: