0
私はRailsとBootstrapをかなり使い慣れています。 Bootstrap4 ThemeをRuby RailsのWebサイトに組み込むのに苦労しています。 私は試してみると、何らかのテキストの空白がすべて表示されます。 BS4 bootstrap-rubygemをインストールしました。実際にはアプリケーションのウェブサイト&すべての基本BSスタイリングは、デフォルトのものを適切に使用してうまく動作します。しかし、私はこのスタイリングがとても好きなので、組合には運がほとんどありません。this Bootswatch Flatly ThemeOn this page for Flatly Bootswatchこれは、ダウンロードする6つのファイル、つまりbootstrap.min.css、bootstrap.css、variables.less、bootswatch.less、_variables.sass、_bootswatch.sassを提供します。私はfilenameでアンダースコアで始まるsassファイルのみが必要だと考えています。だから私はこれらの2つのファイルをassets/stylesheetsフォルダに入れました。ウェブサイトにダウンロードするjsファイルはありませんので、私はassets/javascriptsフォルダのjsファイルは必要ないと思いますか？だからどこにもjsファイルが貼り付けられていない。ここ は私の設定です： Gemfile：Bootstrap4のテーマをRuby RailsのWebサイトに組み込む
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 .
だから、問題は、ナビゲーションバーが見えるだけでいくつかのテキストすべて白であるということである：私は詳細なRailsの5.1とBS4が、運のための基本的な手順で検索しました
<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>
!!
あなたはCSSファイル404のいずれかどうかを確認するためにはJavaScriptインスペクタをチェックし、また、ページのキャッシュをリフレッシュするために制御シフトrを行って？いますか –
jsエラーまたは404がありません。しかし、それは私のカスタムセックスをヒットしないように見えます。私はapplication.scssの中で物事の順序で遊んでいます。ありがとう！ – TheMissingNTLDR