由于这个问题很常见，因此我多次在此网站上看到此问题。不幸的是，这些解决方案都不适合我。下面是我的代码。这是在我在Ruby on Rails应用程序上安装Bootstrap之后开始的，因此我认为这是一个错误或我错过了一些东西。
我的宝石文件：
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.5.3'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.2.2'
# Use Puma as the app server
gem 'puma', '~> 3.11'
# 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 'duktape'
# 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', '~> 4.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'bootstrap-sass'
gem 'jquery-rails'
# Use ActiveStorage variant
# gem 'mini_magick', '~> 4.8'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.1.0', require: false
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]
end
group :production do
gem 'pg'
end
group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
end
group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of chromedriver to run system tests with Chrome
gem 'chromedriver-helper'
end
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
我的application.js：
// 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require bootstrap-sprockets
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
包含我的导航栏的我的application.html.erb文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<title>Website</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application.css" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<!-- Navigation -->
<div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Alex Ross</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Education/Experience', root_path(anchor: 'Education') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Projects', root_path(anchor: 'Projects') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Skills', root_path(anchor: 'Skills') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Certifications', root_path(anchor: 'Certifications') %>
</div>
</li>
<li class="nav-item">
<div class="nav-link">
<%= link_to 'Contact', root_path(anchor: 'Contact') %>
</div>
</li>
</ul>
</div>
</div>
</nav>
</div>
<%= yield %>
</body>
</html>
我的application.scss文件：
@import "bootstrap-sprockets";
@import "bootstrap";
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
#Intro a:link { color:black; }
#Intro a:visited { color: black; }
#Intro a:hover { color: black; }
#Intro a:active { color: black; }
答案 0 :(得分：0)
在application.scss文件中：
@import "bootstrap";
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
或创建新文件“ main.sccs”：
body {
margin: auto;
max-width: 800px;
padding-top: 65px;
}
a:link {
color: white;
}
a:hover {
color: white;
}
a:visited {
color:white;
}
然后...将导入添加到“ application.sccs”> @import“ main”;
也许是宝石错误。
在Gemfile中安装gem：
gem'bootstrap'，'〜> 4.1.3'
gem'jquery-rails'
然后在终端“ bundle i”中输入。
答案 1 :(得分：0)
现在可以使用！我从gemfile中删除了duktape，在计算机上安装了nodejs，然后重新排列了application.js，如下所示：
// 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. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .