Bootstrap 无法在 Ruby on Rails 应用程序中正确加载答案

【问题标题】：Bootstrap not properly loading in Ruby on Rails appBootstrap 无法在 Ruby on Rails 应用程序中正确加载
【发布时间】：2018-03-03 15:57:24
【问题描述】：

如何让 Bootstrap 4 加载到我的网络应用程序上？

我的宝石文件：

gem 'rails', '~> 5.1.5'
gem 'devise'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'
gem 'coffee-script', '~> 2.4', '>= 2.4.1'
gem 'sqlite3'
gem 'puma', '~> 3.7'
gem 'autoprefixer-rails', '~> 8.1'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

Application.html.erb：

<!DOCTYPE html>
<html>

<head>
  <title>Itonatalaga</title>
  <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Start Bootstrap</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <%= yield %>
      </div>
    </div>
    <!-- row -->
  </div>
  <!-- container -->
  <style>
    body {
      padding-top: 70px;
    }
  </style>
</body>

</html>

localhost:3000 的截图：

我之前遇到过需要 coffee-script-source 才能避免 Exec.js 错误的问题。然后我决定在我的机器上安装 Node.js，但是什么也没发生。 Bootstrap 仍然无法加载。

【问题讨论】：

你在 applciation.(s)css 中导入了吗？ github.com/twbs/bootstrap-sass#a-ruby-on-rails

标签： html css ruby-on-rails bootstrap-4

【解决方案1】：

Bootstrap 3 与 Bootstrap 4 完全不兼容。

你不能指望 Bootstrap 3 css 可以使用 Bootstrap 4 语法。

这个：

gem 'bootstrap-sass', '~> 3.3.7'

是 Bootstrap 3。

您的 Bootstrap 4 HTML 需要 4.0.0。

【讨论】：

【解决方案2】：

Bootstrap 4 有一个新的 Ruby gem。它被称为bootstrap-rubygem。按照 repo README 中的说明进行操作，应该没问题。

您必须考虑到 Bootstrap 4 与 Bootstrap 3 代码不兼容。如果你有一个更大的代码库，你必须彻底修改它。

【讨论】：