2017-06-20 4 views
0

Ich habe Probleme mit Bootstrap. Das Folgende ist meine Anwendungsseite auf Schienen mit deaktiviertem postgresql und turbolinks. Lass mich wissen, was ich falsch mache, ich kann es nicht herausfinden.bootstrap nav bar nicht angezeigt

<!DOCTYPE html> 
<html> 
<head> 
<title>Website</title> 
<%= csrf_meta_tags %> 

<%= stylesheet_link_tag 'application', media: 'all' %> 
<%= javascript_include_tag 'application' %> 
<link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384- 
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous"> 
</head> 
<body> 


<nav class="navbar navbar-toggleable-md navbar-light bg-faded"> 
<button class="navbar-toggler navbar-toggler-right" type="button" data- 
toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria- 
expanded="false" aria-label="Toggle navigation"> 
<span class="navbar-toggler-icon"></span> 
</button> 
<a class="navbar-brand" href="#">Navbar</a> 
<div class="collapse navbar-collapse" id="navbarNav"> 
<ul class="navbar-nav"> 
    <li class="nav-item active"> 
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span> 
</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Features</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="#">Pricing</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link disabled" href="#">Disabled</a> 
    </li> 
    </ul> 
</div> 
</nav> 


<%= yield %> 
</body> 
</html> 

The page looks as follows Browser console as follows, Using Bootstrap Gem and jquery Gem, let me know why I am recieving errors

+0

häufig? – hashrocket

+0

Können Sie die Ausgabe in der Browserkonsole hinzufügen? –

+0

Ich habe Konsolenbild hinzugefügt. Kein Grund, warum ich das Juwel nicht benutze, ich habe gerade angefangen Bootstrap zu lernen. – realtomfeng

Antwort

0

Sie Bootstrap CSS nur importiert. Du brauchst auch die JS. Gibt es Gründe, verwenden Sie nicht das Bootstrap-Juwel mit

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

Besser das Bootstrap Juwel zu verwenden, ich bootstrap-sass

+0

Ich benutze das Bootstrap Gem und Jquery Juwel. Es funktioniert jetzt! – realtomfeng