Bootstrap 3 not loading

我想在我的網站上使用一些基本的引導，但它只是沒有做任何事情。我已經安裝了「引導-Sass的寶石和custom.css.sass寫的CSS代碼，但沒有在現場
Bootstrap 3 not loading

任何變化這是custom.css.scss文件

@import "bootstrap-sprockets"; 
@import "bootstrap"; 

/*universal */ 
html{ 
    overflow-y: scroll; 
} 
body { 
    padding-top: 60px; 
} 
section{ 
    overflow : auto; 
} 
textarea { 
    resize: vertical; 
} 
.center{ 
    tent-align : center 
} 
.center h1{ 
    margin-bottom : 10px; 
} 

/* topography */ 
h1, h2, h3, h4, h5, h6 { 
    line-height : 1; 
} 
h1 { 
    font-size : 3em; 
    letter-spacing : -2px; 
    margin-bottom : 30px; 
    text-align : center; 
} 
h2{ 
    font-size : 1.7em; 
    letter-spacing : -1px; 
    margin-bottom : 30px; 
    text-align : center; 
    font-weight : normal; 
    color : #999; 
} 
p { 
    font-size : 1.1em; 
    line-height : 1.7em; 
} 

/* header */ 
#logo{ 
    float : left; 
    margin-right : 10px; 
    font-size : 1.7em; 
    color : #fff; 
    tex-transform : uppercase; 
    letter-spacing : -1px; 
    padding-top : 9px; 
    font-weight : bold; 
    line-height : 1; 
} 
#logo:hover { 
    color : #fff; 
    text-decoration : none; 
}

這是application.html文件

<!DOCTYPE html> 
<html> 
<head> 
    <title><%= full_title(yield(:title)) %></title> 
    <%= stylesheet_link_tag 'default', media: 'all', 'data-turbolinks-track'  => true %> 
    <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
    <!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script> 
    <![endif]--> 
</head> 
<body> 
    <header class="navbar navbar-fixed-top"> 
     <div class="navbar-inner"> 
      <div class="container"> 
      <%= link_to "samples app", '#', id: "logo" %> 
      <nav> 
       <ul class="nav pull-right"> 
       <li><%= link_to "Home", '#' %></li> 
       <li><%= link_to "Help", '#' %></li> 
       <li><%= link_to "Sign in", '#' %></li> 
       </ul> 
      </nav> 
     </div> 
    </div> 
</header> 
<div class="container"> 
    <%= yield %> 
</div> 
</body> 
</html>

，這是Home.html文件中

<div class="center jumbotron"> 
    <h1>Welcome to the Sample App</h1> 
    <h2> 
    This is the home page for the 
    <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> 
    sample application. 
    </h2> 
    <%= link_to "Sign up now!", '#', class: "btn btn-large btn-primary" %> 
</div> 
<%= link_to image_tag("rails.png", alt: "Rails"), 'http://rubyonrails.org/' %>

application.css

/* 
* 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 
*/

Output

在application.html我chanaged的（stylesheet_link_tag 'application'到stylesheet_link_tag 'default'）和（javascript_include_tag 'application'到javascript_include_tag 'default'），因爲它是發送一個錯誤爲（對象不列入支持這種方法）

來源

2016-05-05 Kushal Singh

瀏覽器開發工具控制檯中的任何錯誤？ –

你有其他的css文件嗎？當你在瀏覽器中查看生成的源代碼並查找css文件時，你會得到什麼？這可能是'custom.css'根本不包括在內（取決於'default.css'）。另一個問題可能是您命名文件'.css'而不是'.scss'。 – wvengen

請發佈您的application.css文件 –

嘗試重命名custom.css至custom.scss

來源

2016-05-05 17:31:10

該文件實際上命名爲custom.css.scss –

Bootstrap 3 not loading

回答

相關問題