Question

刚刚开始使用Rails 5附带项目。开箱即用的导航栏显示时出现一些问题。

按照所附的屏幕快照，所有内容都被压缩了。有什么想法吗？

我在下面附上了相关代码。

谢谢！

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <%= stylesheet_link_tag    "application", media: "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/navigation' %>
    <%= yield %>
    </br></br>
    <%= render 'layouts/footer' %>

  </body>
</html>

导航-导航栏

<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

宝石文件

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# 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', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'devise'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  gem 'sqlite3', '~> 1.3.6'
  gem 'byebug',  '11.1.3', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

group :production do
  gem 'pg', '1.2.3'
end

application.scss

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
 
@import "bootstrap-sprockets";
@import "bootstrap";

Answer 1

如doc中所述，Bootstrap Javascript取决于jquery，它是通过Gemfile安装的，但是您应该在您的application.js中添加Bootstrap依赖项和Bootstrap：

//= require jquery3
//= require popper
//= require bootstrap

Answer 2

在您的gem文件中，您包含了多个与引导程序相关的gem，即

gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

我不确定是否全部所需，但是按照这种方法在rails 5中实现引导就足够了。

这是我的Rails 5项目的引导程序设置

在Gemfile中

gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

某些版本的引导程序给我带来了问题，对我来说效果很好，请检查一下是否与您相同

在application.js中，像这样在顶部包含jquery popper和bootstrap。

//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

在application.scss中只能做

@import "bootstrap";

执行Rails资产：确定要预编译并重新启动Rails服务器。

并且引导程序应该工作正常，至少对我有用，我希望它对您有所帮助。

Rails引导导航栏显示问题

2 个答案: