bootstrap 4导航栏在rails 5应用程序中不起作用

Posted 2023-03-06

【中文标题】bootstrap 4导航栏在rails 5应用程序中不起作用

【英文标题】：bootstrap 4 navbar not working in rails 5 app

【发布时间】：2018-02-10 20:36:07

【问题描述】：

我正在将我的静态 html/CSS/JS 网站迁移到 Rails 应用程序。我正在使用 Bootstrap 4，所有 Bootstrap 4 功能和 CSS 类都在静态页面上工作。现在在 Ruby 应用程序中，导航栏根本不显示。

我是否缺少 gem 文件？是否有特定方法可以嵌入我做错的样式标签？

我的宝石文件：

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>

【问题讨论】：

你的 bootstrap gem 中包含 popper.js 吗？ Popper.js 是 bootstrap 4.0.0.beta 的一个依赖，你可以看到here.

您可以发布您的应用程序 scss 文件吗？您是否在其中包含了引导程序（根据 gems 自述文件）？

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700); @import "bootstrap"; @import "font-awesome";

【参考方案1】：

我也遇到了同样的问题，发现改了就解决了

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