Ruby on Rails的引導CSS JS工作，但沒有找到

我有我添加了自舉寶石Ruby on Rails的引導CSS JS工作，但沒有找到

首先我將此兩種寶石

gem 'bootstrap' 
gem 'sprockets-rails', :require => 'sprockets/railtie'

裏面裝了這個包

Using bootstrap 4.0.0.alpha3 
Using sprockets 3.6.0

Rails應用程序

我修改後application.scss至

// Custom bootstrap variables must be set or import before bootstrap itself. 
@import "bootstrap";

後來我就離開application.js這樣

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require turbolinks 
//= require tether 
//= require bootstrap-sprockets 
//= require_tree . 
//= require_self

最後我application.html.erb是這個

<!DOCTYPE html> 
<html> 
<head> 
    <title>Squirm</title> 
    <%= stylesheet_link_tag "bootstrap" %> 
<%= javascript_include_tag "bootstrap" %> 
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= csrf_meta_tags %> 
</head> 
<body> 
    <%= render 'partials/navbar' %> 

    <div class="container"> 
    <%= yield %> 
    </div> 

</body> 
</html>

引導似乎我們的工作，但在谷歌瀏覽器控制檯似乎並沒有被發現

來源

2016-04-30 agusgambina

您在加載jQuery之前加載Bootstrap。許多Bootstrap的組件需要JavaScript（傳送帶，標籤等），然而，Bootstrap的大部分功能都無法正常工作，這就是Bootstrap CSS顯示在您的頁面上的原因。

加載引導後jQuery將解決這個問題：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Squirm</title> 

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
<%= stylesheet_link_tag "bootstrap" %> 
<%= javascript_include_tag "bootstrap" %> 
<%= csrf_meta_tags %> 
</head> 
<body> 
    <%= render 'partials/navbar' %> 

    <div class="container"> 
    <%= yield %> 
    </div> 

</body> 
</html>

而且，不是100％確定基於你的代碼，但你可能會加載引導兩次。看來這行：//= require bootstrap-sprockets已經加載Bootstrap。

來源

2016-04-30 13:29:38

謝謝@AnthonyE我有兩個錯誤，首先是導入順序，其次是我爲項目添加了兩次bootstrap。 – agusgambina

你需要添加jquery以及通常jQuery的捆綁在軌應用程序，但可能是由於某種原因它不是THR在你的應用程序

從

https://cdnjs.com/libraries/jquery/

添加 jQuery和我們knwo如果這種變化的作品。

來源

2016-04-30 13:29:20 Apoorv

它看起來像jQuery已被加載在'application.js' –

謝謝你@ user5501253你是對的，jquery是在錯誤的順序，這就是爲什麼bootstrap不會看到它。 – agusgambina

Ruby on Rails的引導CSS JS工作，但沒有找到

回答

相關問題