引導4導航欄在導軌不工作5應用

我遷移我的靜態HTML/CSS/JS網站的Rails應用程序。我使用Bootstrap 4，並且所有的Bootstrap 4功能和CSS類都在靜態頁面上工作。現在在Ruby應用程序中，導航欄完全不顯示。引導4導航欄在導軌不工作5應用

我缺少一個寶石文件？有沒有特定的方式來嵌入我做錯了的樣式標籤？

我的寶石文件：

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); 
}

我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>

來源

2017-09-01 nightrainlily

包含在你的引導寶石popper.js？ Popper.js是引導4.0.0.beta的依賴，你可以看到[點擊這裏]（https://getbootstrap.com/docs/4.0/getting-started/introduction/）。 – cwanjt

你可以發佈你的應用程序的{s} css文件嗎？你有沒有把自舉的東西（每個寶石自述文件）包含在裏面？ –

'@import URL（https://fonts.googleapis.com/css?family=Montserrat:400,700）; @import「bootstrap」; @import 「FONT-真棒」;' – nightrainlily

我有同樣的問題，並發現它是固定的，通過改變

<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/

來源

2017-09-11 04:24:10 milkbox

哈，說了wayyy過長弄清楚。謝謝！ –

引導4導航欄在導軌不工作5應用

回答

相關問題