我正在将我的静态
HTML / CSS / JS站点迁移到Rails应用程序.我正在使用Bootstrap 4,并且所有Bootstrap 4功能和CSS类都在静态页面上工作.现在在
Ruby应用程序中,导航栏根本没有显示出来.
我错过了一个宝石文件吗?是否有一种特定的方式来嵌入我做错的样式标签?
我的宝石文件:
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,.4); }
我的application.html.erb负责人:
<%= stylesheet_link_tag 'application',media: 'all','data- turbolinks-track': 'reload' %> <%= javascript_include_tag 'application','data-turbolinks-track': 'reload' %>
我的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">
至
<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">
您可能正在查看不同版本的文档. 4.0.0beta的文档可在此处找到https://getbootstrap.com/docs/4.0/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。