Question

我正在尝试构建我的第一个rails web应用程序，而且我已经陷入了需要将导航栏的Bootstrap代码嵌入到我的应用程序中的地步我开始使用NavBar（下面的代码）。它出现在我的主页上，但它看起来很破碎。我会用这个问题附上照片。谢谢你的帮助！

在〜/ views / layouts / application.html.erb文件中：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" 
  aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <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="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

在〜/ application.css.scss文件中：

@import "bootstrap-sprockets";
@import "bootstrap";

在gemfile中：

gem 'bootstrap-sass', '3.3.6'
gem 'sass-rails', ' 3.2'

在〜/ application.js中：

//= require jquery
//= require bootstrap-sprockets

然后我运行命令bundle install，我得到了这个丑陋的输出：

Bundler could not find compatible versions for gem "sass":
  In Gemfile:
    bootstrap-sass (= 3.3.6) was resolved to 3.3.6, which depends on
      sass (>= 3.3.4)

    sass-rails (= 3.2) was resolved to 3.2.0, which depends on
      sass (~> 3.1.10)

我尝试用我在开发中的非常有限的知识来解决它但我无法做到。我在Cloud9平台上学习Ruby on Rails。有人可以帮忙吗？提前谢谢。

萌

的Gemfile：

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.1.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', group: [:development, :test]
#Use Bootstrap library for styling.

#Use postgresql as the db for production
group :production do
    gem 'pg'
    gem 'rails_12factor'
end
# Use SCSS for stylesheets


# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer',  platforms: :ruby
gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '~> 5.0'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '0.4.0',          group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring',        group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

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

# Use debugger# gem 'debugger', group: [:development, :test]

Answer 1

您有许多地方指定特定版本的宝石。喜欢：

gem 'uglifier', '1.3.0'
gem 'coffee-rails', '4.0.0'
gem 'jbuilder', '2.0'

那些应该更像：

gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

等等。特定版本的命名是导致宝石兼容性问题的原因。

Answer 2

@moe如果你谷歌搜索Bundler could not find compatible versions for gem "sass":，第一个结果可能会回答你的问题： Bundler could not find compatible versions for gem "sass"

最重要的是，您正在锁定gems版本，试试这个并感到高兴：

gem 'bootstrap-sass', '3.3.6' gem 'sass-rails', '~> 3.2' 以下是~> What does ~> mean in a gem file

的参考

Answer 3

谢谢大家，我非常感谢你给我的时间和精力。所以，我今天来上班了，我坚持了将近5个小时的问题今天在10分钟内得到了解决！我不确定究竟是什么修复它，但我使用了你们的输入，我做了以下几点：

1-我'ctrl + x'了Gemfile的所有内容，保存并运行：

bundle install

然后我将内容粘贴回来，然后再次运行bundle install。我收到了这个错误：

Could not find gem 'sass-rails (~> 3.5.1)' in any of the gem sources listed in your Gemfile.

2-我运行了以下命令：

gem install rails

3-

gem install railties

4-我将gem 'railties', '4.1.0'添加到Gemfile。

5-然后bundle install并接受命令。在某些时候，gemfile.lock来了（我之前删除它，当我试图修复他的问题时）。

正如你所看到的，我不知道我在做什么，我不知道是什么解决了问题，但现在它正在工作，我可以在我的网页上看到bootstrap元素。谢谢萌

部署在rails应用程序中的Bootstrap NavBar看起来很糟糕

3 个答案: