2017-08-21 4 views
0

ich mit Ruby on Rails zu programmieren begonnen und ich versuchte Bootstrap meiner Ruby On Rails zu importieren, und ich versuchte, eine navbar meiner App einfügen und das ist das Ergebnis: Only text styles workBootstrap Arten nicht auf Schienen auf Rubin arbeiten

Wie Sie nur die Textstil arbeitet sehen ..

Mein Gemfile:

source 'https://rubygems.org' 


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.5' 
# Use sqlite3 as the database for Active Record gem 'sqlite3' 
# Use SCSS for stylesheets gem 'sass-rails', '~> 5.0' 
# Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' 
# Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.1.0' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1' 
# See https://github.com/rails/execjs#readme for more supported runtimes 
# gem 'therubyracer', platforms: :ruby 

# Use jquery as the JavaScript library gem 'jquery-rails' 
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' 
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0' 
# bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc 

# Use ActiveModel has_secure_password 
# gem 'bcrypt', '~> 3.1.7' 

# Use Unicorn as the app server 
# gem 'unicorn' 

# Use Capistrano for deployment 
# gem 'capistrano-rails', group: :development 

group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug' end 

group :development do # Access an IRB console on exception pages or by using <%= console %> in views gem 'web-console', '~> 2.0' 

    # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring' 
    gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6' 

end 

Mein application.css.scss:

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

Mein application.js:

//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require bootstrap-sprockets 
//= require_tree . 

Mein application.html.erb

<!DOCTYPE html> 
<html> 
<head> 
    <title>Workspace</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true%> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body> 
<nav class="navbar navbar-expand-lg navbar-light bg-light"> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01"> 
    <a class="navbar-brand" href="#">Hidden brand</a> 
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0"> 
     <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="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline my-2 my-lg-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav> 


<%= yield %> 

</body> 
</html> 
Danke

im Voraus!

Antwort

0

Versuchen

//= require bootstrap.min 

In Ihrem application.js

+0

Immer noch das Gleiche. –

+0

gem 'sass-rails', '> = 3.2' Versuchen Sie, dies in gemfile und run-Bundle und versuchen Sie es erneut den Server neu starten –

+0

Fügen Sie es oder ersetzen Sie mit Edelstein 'Sass-Schienen', '~> 5.0'? –

0

Sie verwenden bootstrap-sass zu schreiben, so dass Sie sass-rails gem benötigen. Vom bootstrap-sass

In Ihrem Gemfile benötigen Sie das Bootstrap-Sass Juwel hinzuzufügen, und stellen Sie sicher, dass die Sass-Schienen gem vorhanden ist - es neue Rails Anwendungen standardmäßig hinzugefügt wird.

Das heißt, fügen gem sass-rails in Ihrem Gemfile, dann bundle install und starten Sie den Server

Update:

Auch müssen Sie bootstrap-sprocketsvor importieren die bootstrap.

#application.css.scss 
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" 
@import "bootstrap-sprockets"; 
@import "bootstrap"; 
+0

Immer noch nicht –

+0

@OmerTaB Haben Sie auch versucht, meine aktualisierte Antwort? Hast du den Server auch neu gestartet? – Pavan

+0

Ja und es ändert sich nicht –

0

Ich denke, es könnte die Tatsache sein, dass Sie die Perle ‚Bootstrap-Sass‘ haben in der Entwicklungsgruppe. Dies sollte in der Wurzel der Gemfile gehen.

Verwandte Themen