Bootstrap没有在Ruby on Rails应用程序中正确加载

Question

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

我的Gemfile：

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仍然无法加载。

Answer 1

Bootstrap 3与Bootstrap 4完全不兼容。

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

这个：

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

是Bootstrap 3。

你的Bootstrap 4 HTML需要4.0.0。

Answer 2

Bootstrap 4有一个新的Ruby gem。它被称为bootstrap-rubygem。按照repo自述文件中的说明操作，你应该没问题。

您必须考虑Bootstrap 4与Bootstrap 3代码不兼容。如果您有更大的代码库，则必须完全修改它。

Bootstrap没有在Ruby on Rails应用程序中正确加载

问题描述投票：0回答：2

2个回答

最新问题

Bootstrap没有在Ruby on Rails应用程序中正确加载

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2