2016-07-04 55 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 > 我認爲這就是你需要的一切,如果它不工作讓我知道。祝你好運。