2016-04-30 13 views
0

ich eine Rails-Anwendung, die ich den Bootstrap-JuwelRuby on Rails Bootstrap css js arbeiten, aber nicht gefunden

ersten habe ich dieses Bild Zwei Edelsteine ​​

hinzugefügt
gem 'bootstrap' 
gem 'sprockets-rails', :require => 'sprockets/railtie' 

, die diese

Using bootstrap 4.0.0.alpha3 
Using sprockets 3.6.0 
Pakete installiert

Nachdem ich application.scss zu

// Custom bootstrap variables must be set or import before bootstrap itself. 
@import "bootstrap"; 
geändert habe

Dann verließ ich application.js wie diese

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require tether 
//= require bootstrap-sprockets 
//= require_tree . 
//= require_self 

Schließlich mein application.html.erb ist diese

<!DOCTYPE html> 
<html> 
<head> 
    <title>Squirm</title> 
    <%= stylesheet_link_tag "bootstrap" %> 
<%= javascript_include_tag "bootstrap" %> 
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
</head> 
<body> 
    <%= render 'partials/navbar' %> 

    <div class="container"> 
    <%= yield %> 
    </div> 

</body> 
</html> 

Bootstrap scheint wir arbeiten, aber in der Google Chrome-Konsole scheint nicht

enter image description here gefunden werden

Antwort

2

Sie laden Bootstrap, bevor Sie jQuery geladen haben. Viele der Bootstrap-Komponenten benötigen Javascript (Karussell, Tabs usw.), die meisten Bootstrap-Programme funktionieren jedoch ohne. Daher wird das Bootstrap-CSS auf Ihrer Seite angezeigt.

Laden Bootstrap nach jQuery wird das Problem beheben:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Squirm</title> 

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= stylesheet_link_tag "bootstrap" %> 
<%= javascript_include_tag "bootstrap" %> 
<%= csrf_meta_tags %> 
</head> 
<body> 
    <%= render 'partials/navbar' %> 

    <div class="container"> 
    <%= yield %> 
    </div> 

</body> 
</html> 

Auch nicht 100% sicher auf dem Code basiert, doch Sie können Laden zweimal sein Bootstrap. Es scheint diese Zeile: //= require bootstrap-sprockets lädt bereits Bootstrap.

+0

danke @AnthonyE Ich hatte zwei Fehler, zuerst die Reihenfolge meines Imports, zweitens, dass ich Bootstrap zweimal zum Projekt hinzugefügt habe. – agusgambina

2

Sie müssen jquery auch normalerweise hinzufügen jquery kommen in Rails-Anwendung gebündelt, aber vielleicht aus irgendwelchen Gründen seine nicht thr in Ihrer App

hinzufügen jquery von

https://cdnjs.com/libraries/jquery/ 

und lassen Sie uns an, wenn diese Änderung Werke knwo.

+0

Es sieht aus wie jQuery wird bereits geladen in 'application.js' –

+0

danke @ user5501253 Sie hatten Recht, dass jquery in der falschen Reihenfolge war und das war warum Bootstrap es nicht sehen würde. – agusgambina