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

回答

相关问题