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

时间:2016-08-04 15:36:09

标签: node.js twitter-bootstrap ibm-cloud ejs

我正在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>

1 个答案:

答案 0 :(得分:0)

当您在Bluemix中加载应用时,您的浏览器是否会显示&#34;屏蔽&#34;地址栏中的图标?如果是这样,您可能会遇到mixed content blocking。这基本上意味着当通过HTTPS提供网站的其余部分时,浏览器拒绝运行通过HTTP提供的外部内容。

最简单的解决方法是将外部资源更改为所有https://网址:

<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://网址加载Bluemix应用。