2016-07-04 99 views
0

我正在关注Aurelia tutorial,我注意到引导可折叠的导航栏根本不起作用。我发现有人的heroku app与完全相同的问题在线。Aurelia教程可折叠的导航栏不工作

这里是我的源

<template> 
<require from="bootstrap/css/bootstrap.css"></require> 
<require from="font-awesome/css/font-awesome.css"></require> 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> 
      <span class="sr-only">Toggle Navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"> 
      <i class="fa fa-home"></i> 
      <span>${router.title}</span> 
     </a> 
    </div> 
    <div class="collapse navbar-collapse" id="example-navbar-collapse"> 
     <ul class="nav navbar-nav"> 
      <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}"> 
       <a href.bind="row.href">${row.title}</a> 
      </li> 
     </ul> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="loader" if.bind="router.isNavigating"> 
       <i class="fa fa-spinner fa-spin fa-2x"></i> 
      </li> 
     </ul> 
    </div> 
</nav> 
<div class="page-host"> 
    <router-view></router-view> 
</div> 

任何想法,什么是怎么回事呢?

回答

1

确保您的应用程序中包含引导程序库。

app.js

import 'bootstrap/js/bootstrap.min'; // or wherever it is 
0

在你是index.html,加入这一行: < --JSPM具有与引导使我们必须包括jQuery的这里 - > <脚本一个Bug src =“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js”> </script > 我认为这就是你需要的一切,如果它不工作让我知道。祝你好运。