我正在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>
答案 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应用。