无法在Bluemix部署的应用程序中展开折叠的导航栏

我正在bluemix中部署一个非常简单的node.js应用程序。我正在使用ejs和bootstrap在顶部创建一个导航栏。它适用于我的本地版本的代码，但当我将其推送到bluemix并部署时，导航栏不会扩展。有趣的是，浏览器看到的两个应用程序的源代码完全相同。这是代码：

<!-- views/pages/start.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- views/partials/head.ejs -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>
<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    body    { position: relative; padding-top:50px; }
</style>
</head>
<body class="container" data-spy="scroll" data-target=".navbar" data-offset="50">
<header>
<!-- views//partials/header.ejs -->

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Website</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li><a href="#section1">Section 1</a></li>
          <li><a href="#section2">Section 2</a></li>
          <li><a href="#section3">Section 3</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>
</header>

在Bluemix中加载应用程序时，浏览器是否在地址栏中显示"屏蔽"图标？如果是这样，您可能会遇到混合内容阻塞。这基本上意味着，当网站的其余部分通过HTTPS提供服务时，浏览器拒绝运行通过HTTP提供的外部内容。

修复它的最简单方法是将外部资源更改为所有https:// URL：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

为了安全起见，您应该始终使用其https:// URL加载Bluemix应用程序。

相关内容

最新更新

热门标签：