Я видел этот вопрос на этом сайте несколько раз, так как кажется, что это общая проблема.К сожалению, ни одно из этих решений не помогло мне.Ниже будет мой код.Это началось после того, как я установил Bootstrap в своем приложении Ruby on Rails, поэтому я предполагаю, что это ошибка или я что-то пропустил.
Мой Gemfile:
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, который содержит мой Navbar:
<!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; }