Aurelia tutorial klappbar navbar funktioniert nicht

Question

Ich folge dem Aurelia tutorial und ich habe festgestellt, dass die bootstrap reduzierbare navbar überhaupt nicht funktioniert. Ich habe jemandes heroku app online mit genau dem gleichen Problem gefunden.

Hier ist meine Quelle

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

Jede Idee, was mit diesem ist da los?

Answer 1

Stellen Sie sicher, dass Sie die Bootstrap-Bibliothek in Ihre Anwendung einbeziehen.

app.js

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

Answer 2

In Ihrer 'index.html' Fügen Sie diese Zeile: < --JSPM einen Bug mit Bootstrap hat, also müssen wir jQuery hier-- einschließen > < Skript src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" > </script > Ich denke, das ist alles was Sie brauchen, wenn es nicht funktioniert, lassen Sie mich kennt. Viel Glück.