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

Question

I am deploying a very simple node.js application in bluemix. 我正在bluemix中部署一个非常简单的node.js应用程序。 I am using ejs and bootstrap to create a navbar at the top. 我正在使用ejs和bootstrap在顶部创建导航栏。 It works on my local version of the code, but when I push it to bluemix and deploy, the navbar doesn't expand. 它适用于我的本地代码版本，但是当我将其推送到bluemix并进行部署时，导航栏不会扩展。 Interestingly the source code for both apps as seen by the browser is exactly the same. 有趣的是，浏览器看到的两个应用程序的源代码完全相同。 Here is the code: 这是代码：

<!-- 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>

Answer 1

When you load your app in Bluemix, does your browser show a "shield" icon in the address bar? 在Bluemix中加载应用程序时，浏览器是否在地址栏中显示“屏蔽”图标？ If so, you might be running into mixed content blocking . 如果是这样，您可能会遇到混合内容阻止。 This basically means the browser refuses to run external content served over HTTP when the rest of the website is served over HTTPS. 基本上，这意味着当网站的其余部分通过HTTPS提供服务时，浏览器拒绝运行通过HTTP提供的外部内容。

The easiest way to fix it is by changing your external resources to all https:// URLs: 解决此问题的最简单方法是将外部资源更改为所有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>

For security, you should always load your Bluemix app using its https:// URL as well. 为了安全起见，您还应该始终使用其https:// URL来加载您的Bluemix应用程序。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-08-04 17:29:53

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-08-04 17:29:53

解决方案1
0 已采纳 2016-08-04 17:29:53