Bootstrap 样式不适用于 ruby on rails答案

【问题标题】：Bootstrap styles dont work on ruby on railsBootstrap 样式不适用于 ruby on rails
【发布时间】：2017-08-22 09:39:14
【问题描述】：

我开始使用 ruby on rails 进行编程，并尝试将引导程序导入到我的 Ruby On Rails 中，并尝试将导航栏插入到我的应用程序中，结果如下： Only text styles work

如您所见，只有文本样式有效..

我的宝石文件：

    source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.2.5'
# Use sqlite3 as the database for Active Record gem 'sqlite3'
# 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.1.0' gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'
# 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 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

# 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

group :development, :test do   # Call 'byebug' anywhere in the code to stop execution and get a debugger console   gem 'byebug' end

group :development do   # Access an IRB console on exception pages or by using <%= console %> in views   gem 'web-console', '~> 2.0'

  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring   gem 'spring'
     gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'

end

我的应用程序.css.scss：

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

我的 application.js：

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

我的 application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Workspace</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true%>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Hidden brand</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <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">
        <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="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>


<%= yield %>

</body>
</html>

提前谢谢你！

【问题讨论】：

标签： ruby-on-rails ruby

【解决方案1】：

试着写

//= require bootstrap.min

在你的 application.js 中

【讨论】：

还是一样。
gem 'sass-rails', '>= 3.2' 尝试在 gemfile 中添加它并运行 bundle 并再次尝试重新启动服务器
添加或替换为 gem 'sass-rails', '~> 5.0'?
看起来你的 css 很好。您可以尝试删除//= require bootstrap-sprockets 然后在您的application.js 中添加//= require bootstrap

【解决方案2】：

你正在使用bootstrap-sass，所以你需要sass-rails gem。来自bootstrap-sass

在您的 Gemfile 中，您需要添加 bootstrap-sass gem，并确保 sass-rails gem 存在 - 它被添加到新的 Rails 默认应用。

也就是说，在您的Gemfile 中添加gem sass-rails，然后添加bundle install 并重新启动服务器

更新：

另外，您需要在bootstrap之前导入bootstrap-sprockets。

#application.css.scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";

【讨论】：

@OmerTaB 你也试过我更新的答案吗？你也重启了服务器吗？
是的，它没有改变

【解决方案3】：

我认为这可能是因为您在开发组中拥有 gem 'bootstrap-sass'。这应该放在 Gemfile 的根目录中。

【讨论】：