0
我對Rails和Bootstrap相當陌生。我努力將Bootstrap4主題融入Ruby Rails網站。 我嘗試時會顯示帶有文字的所有空白區域。 我已經安裝了BS4 bootstrap-rubygem。事實上，應用程序網站&所有的基本BS造型工作正常，默認的東西就位。然而，我在運作this Bootswatch Flatly Theme的運氣不大，因爲我非常喜歡這種造型。 On this page for Flatly Bootswatch它可以讓你下載6個文件，例如bootstrap.min.css，bootstrap.css，variables.less，bootswatch.less，_variables.sass，_bootswatch.sass。我假設我只需要以文件名下劃線開頭的sass文件。所以我把這兩個文件放在資產/樣式表文件夾中。沒有js文件可以在網站上下載，所以我可以假設我不需要資產/ javascripts文件夾的js文件？所以我沒有將js文件粘貼到任何地方。 這裏是我的設置： 的Gemfile：在Ruby Rails網站中引入Bootstrap4主題
source 'https://rubygems.org'(:github) do |repo_name|
repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
"https://github.com/#{repo_name}.git"
end
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.3'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# 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', platforms: [:mri, :mingw, :x64_mingw]
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '~> 2.13'
gem 'selenium-webdriver'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
#Added by me
group :production do
gem 'pg', '~> 0.21.0'
end
# Added by MS
gem 'bootstrap', '~> 4.0.0.beta'
gem 'jquery-rails', '~> 4.3', '>= 4.3.1'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>OmegaBlog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div class="container-fluid">
<%= render 'layouts/navigation' %>
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</body>
</html>
application.scss（這應該叫做application.css.scss和@import項目正確的順序？ ?? - 我再次對這個疑問）
@import "bootstrap";
@import "variables";
@import "bootswatch";
的application.js（不自信列出項目的順序這裏）
！//= require rails-ujs
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
所以問題是，導航欄是全白，只有一些文本可見：
<div class="bs-docs-section clearfix">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="navbar">Navbar</h1>
</div>
<div class="bs-component">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
</div>
...我已經尋找了詳細的BS4基本說明使用Rails 5.1，但沒有運氣！
你檢查的JavaScript檢查，看看是否有任何的CSS文件的404和也做控制檔R鍵刷新頁面緩存？ –
沒有js錯誤或404s。不過看起來它並沒有打到我自定義的sasses。我正在玩弄application.scss中的事物順序。謝謝！ – TheMissingNTLDR