Rails 4 Bootstrap不加載

我真的處於一個突破點，所以我希望有人能幫助我。Rails 4 Bootstrap不加載

我按照這個文件（以及8個教程）https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails

這樣做，並嘗試從組件/例子getbootstrap網站上添加一個導航欄的網頁我appliaction.html.erb文件我做後看到我的頁面上的文本加載，但我從來沒有得到任何CSS應用到頁面。

這根本不起作用，我在我的智慧結束試圖弄清楚。

UPDATE

我https://github.com/KR0SIV/learning-bootstrap

Application.css.scss

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_tree . 
*= require_self 
*/ 
@import "bootstrap-sprockets"; 
@import "bootstrap";

然後就看它是否會工作，我只是簡單地添加從實例導航欄我的項目application.html.erb文件

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

</head> 
<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
    </div> 

    <!-- Collect the nav links, forms, and other content for toggling --> 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
     <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#">Link</a></li> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li role="separator" class="divider"></li> 
      <li><a href="#">Separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!-- /.navbar-collapse --> 
    </div><!-- /.container-fluid --> 
</nav> 


<%= yield %> 

</body> 
</html>

來源

2015-12-09 Harold Giddings

您可以使用簡單而簡單的方式，無需配置或使用任何寶石： 1.從[官方頁面]（http：// getbootstrap。com） 2.將'bootstrap.css'文件複製並粘貼到'app/assets/stylesheets'，同時將'bootstrap.js'粘貼到'app/assets/javascripts'和其他任何你想要的文件。 3.因此，您可以在視圖中的任何位置使用引導程序，並且完美地工作。讓我知道這是否適合你。 –

沒有看到你如何在你的應用程序中安裝和配置Bootstrap，我們無法幫到你。 – sevenseacat

我試着做你的建議，我將文件導入application.css.scss 雖然我仍然有同樣的問題。 –

所以首先。您的項目中有多個應用程序樣式表。 application.css和application.css.scss。刪除application.css並將另一個重命名爲application.scss。

比刪除下列行：

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the bottom of the 
* compiled file so the styles you add here take precedence over styles defined in any styles 
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new 
* file per style scope. 
* 
*= require_tree . 
*= require_self 
*/

的Bootstrap gem README寫道：

Then, remove all the *= require and *= require_tree statements from the Sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.

在這裏，這可能是你的問題，因爲你說，它沒有找到一個SASS變量。

要導入所有其他CSS文件，添加以下行吹引導進口：

@import '**/*';

這將遞歸添加所有CSS文件。

當然，您必須將樣式表添加到您的HTML模板中。

只使用默認的Rails之一：

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>

重要！ Bootstrap 4仍在開發當前只是一個Alpha版本。我建議你使用Bootstrap 3來製作應用程序。但如果只是爲了學習，那就完全沒問題。

如果有官方寶石可用，我不建議您使用第三方寶石，如twitter-bootstrap-rails。

來源

2015-12-09 08:12:29 Tobias

非常感謝，修復它。現在我終於可以深入瞭解它。 –

Rails 4 Bootstrap不加載

回答

相關問題