Css 引导程序4导航栏在rails 5应用程序中不工作
我正在将我的静态HTML/CSS/JS站点迁移到Rails应用程序。我使用的是Bootstrap4,所有的Bootstrap4功能和CSS类都在静态页面上工作。现在在Ruby应用程序中,导航栏根本没有出现 我丢失了一个gem文件吗?是否有一种特定的方式来嵌入我做错了的样式标记 我的gem文件:Css 引导程序4导航栏在rails 5应用程序中不工作,css,ruby-on-rails,navbar,bootstrap-4,Css,Ruby On Rails,Navbar,Bootstrap 4,我正在将我的静态HTML/CSS/JS站点迁移到Rails应用程序。我使用的是Bootstrap4,所有的Bootstrap4功能和CSS类都在静态页面上工作。现在在Ruby应用程序中,导航栏根本没有出现 我丢失了一个gem文件吗?是否有一种特定的方式来嵌入我做错了的样式标记 我的gem文件: gem 'rails', '~> 5.0.5' gem 'sqlite3' gem 'puma', '~> 3.0' gem 'sass-rails', '~> 5.0' gem 'ug
gem 'rails', '~> 5.0.5'
gem 'sqlite3'
gem 'puma', '~> 3.0'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'bootstrap', '~> 4.0.0.beta'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
gem "autoprefixer-rails"
gem 'jquery-rails'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a
debugger console
gem 'byebug', platform: :mri
end
group :development do
gem 'web-console', '>= 3.3.0'
gem 'listen', '~> 3.0.5'
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
我的javascript需要:
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .
我的自定义CSS:
.navbar-custom {
border-radius: 0px;
z-index: 16;
box-shadow: 0 2px 3px 0 rgba(0,0,0, .4);
}
my application.html.erb head:
<%= stylesheet_link_tag 'application', media: 'all', 'data-
turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track':
'reload' %>
my application.html.erb导航栏:
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom">
<div class="container-fluid d-inline-flex">
<button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
<a class="navbar-brand justify-cotent-start" href="#home"><%= image_tag "logo.png", size:"50" %></a>
</button>
<a class="navbar-brand justify-cotent-start" href="#home"><%= image_tag "logo.png", size:"50" %></a>
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto" style="float: right">
<li class="nav-item"><a class="nav-link" href="#about">about</a></li>
<li class="nav-item"><a class="nav-link" href="#events">events</a></li>
<li class="nav-item"><a class="nav-link" href="#gallery">gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#music">music</a></li>
<li class="nav-item"><a class="nav-link" href="#press-kit">press kit</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">contact</a></li>
</ul>
</div>
</div>
</nav>
切换导航
我遇到了同样的问题,并发现通过更改
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom">
到
您可能正在查看不同版本的文档。在这里可以找到4.0.0beta版的文档引导程序gem中是否包含popper.js?如您所见,Popper.js是bootstrap4.0.0.beta的一个依赖项。您可以发布应用程序{s}css文件吗?您是否已将引导程序的内容(根据gems自述)包含在其中?
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); @导入“引导”@导入“字体真棒”代码>
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">