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

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

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

我的 gem 文件:

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'

应用程序.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 的截图:

enter image description here

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

最佳答案

Bootstrap 3 与 Bootstrap 4 完全不兼容

您不能期望 Bootstrap 3 css 与 Bootstrap 4 语法一起工作。

这个:

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

是 Bootstrap 3。

您的 Bootstrap 4 HTML 需要 4.0.0

关于html - Bootstrap 无法在 Ruby on Rails 应用程序中正确加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49086094/

相关文章:

html - 媒体查询问题 - 防止覆盖 CSS 规则

ios - iPad Safari 上的 localStorage 是否保证持久?

jquery - 根据屏幕大小调整 div 位置

image - SVG 元素不会填满 IE 中的整个容器

javascript - Bootstrap 按钮超链接

ruby-on-rails - 参数数量错误(1 为 2)Rails 4. 可能是 strong_params 问题

html - 对齐表格行和列

css - 使用 Bulma.io 在容器末尾开始列

html - 在 Rails link_to 中添加 span 标签

ruby-on-rails - 缩短 .each do 循环