2016-07-04 13 views
0

私はAurelia tutorialをフォローしていますが、私はbootstrap折りたたみ式navbarがまったく動作していないことに気付きました。私は全く同じ問題を抱えている誰かのheroku appをオンラインで見つけました。Aureliaチュートリアル折りたたみ可能なNavbarが動作しない

は、ここに私のソースこれで何が起こっているかのよう

<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あなたの 'index.htmlを' は、

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

は、この行を追加します。 < --JSPMは、ブートストラップでバグがありそう私たちは、jQueryのHere-- > <にスクリプトを含める必要がありますsrc = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" > < /スクリプト> 私はそれがうまくいかないと思っています知っている。がんばろう。

関連する問題