Question

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

正如您所看到的只有文字样式有效..

我的Gemfile：

    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

我的application.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>

提前谢谢！

Answer 1

尝试写作

//= require bootstrap.min

在你的application.js

中

Answer 2

您正在使用bootstrap-sass，因此您需要sass-rails gem。来自bootstrap-sass

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

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

<强>更新

此外，您需要先导入bootstrap #application.css.scss // "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables" @import "bootstrap-sprockets"; @import "bootstrap";。

main

Answer 3

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

Bootstrap样式不适用于轨道上的红宝石

3 个答案: