Bootstrap wird nicht auf allen App-Seiten angezeigt

Question

Ich habe eine App erstellt und starte es als Test. Die App besteht aus der Verwendung von Bootstrap, um Schaltflächen, Felder, Header und Panels zu erstellen. Wenn ich die App starte, wird eine der Seiten als Roh-HTML angezeigt und zeigt die Felder als reguläre HTML-Seiten an.

Die App ist in Schienen geschrieben, und die html.erb Datei korrekt als gut geschrieben:

<% header "Edit #{resource_name.to_s.humanize}" %> 
<%= form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %> 
<%= devise_error_messages! %> 

<div class="form-control"> 
    <%= f.label :email %><br /> 
    <%= f.email_field :email, autofocus: true, class: 'form-control' %> 
    <% if devise_mapping.confirmable? && resource.pending_confirmation %> 
    <span class="label label-info"> Currently waiting confirmation for: <% resource.unconfirmed_email %></span> 
    <% end %> 
</div> 


<div class="form-group"> 
<%= f.label :password %> 
<%= f.password_field :password, autocomplete: "off", class: 'form-control' %> 
    <span class="help-block">Enter new password</span> 
<% end %> 
</div> 

<div class="form-group"> 
    <%= f.label :password_confirmation %><br /> 
    <%= f.password_field :password_confirmation, autocomplete: "off", class: 'form-control' %> 
</div> 

<div class="form-group"> 
    <%= f.label :current_password %> 
    <%= f.password_field :current_password, autocomplete: "off" %> 
     <span class="help-block">Confirm password</span> 
    <% end %> 
</div> 

<div class="actions"> 
    <%= f.submit "Update", class: 'btn btn-primary' %> 
</div> 
    <% end %> 

    <h3>Cancel my account</h3> 

    <p>Delete account <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?" }, method: :delete %></p> 

    <%= link_to "Back", :back, class: "btn btn-default btn-sm" %> 

Ich habe auch das Bootstrap-Sass Juwel auf dem System installiert:

gem 'devise_zxcvbn' 

gem 'bootstrap-sass' 

die Datei wird auch als auch in der JavaScript-Datei enthalten:

//= require jquery 
//= require global 
//= require jquery_ujs 
//= require jquery.turbolinks 
//= require bootstrap/dropdown 
//= require turbolinks 

Wie kann ich die Seite mit Bootstrap arbeiten?

Answer 1

Sie müssen auch die Bootstrap-Stile in Ihre application.scss-Datei importieren.

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

und die Javascript muss wie folgt eingeführt werden:

//= require bootstrap-sprockets 

Folgen Sie einfach alle Schritte here erwähnt, und Sie werden in Ordnung sein.