2016-05-05 20 views
0

Ich versuche einige grundlegende Bootstrap auf meiner Website zu verwenden, aber es tut einfach nichts. Ich habe den 'Bootstrap-Sass' gem installiert und den CSS-Code in custom.css.sass geschrieben, aber es gibt keine jede Änderung der Website
Bootstrap 3 wird nicht geladen

diesem Zusammenhang die custom.css.scss Datei

@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; 
} 
ist


Dies ist die application.html Datei

<!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> 

und dies ist die home.html Datei

<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

In application.html ich die (stylesheet_link_tag 'application' zu stylesheet_link_tag 'default') chanaged haben und (javascript_include_tag 'application' zu javascript_include_tag 'default'), da es als einen Fehler sendete (Object doesnot diese Methode Unterstützung)

+0

Alle Fehler in Ihrer Browser-Dev Tools-Konsole? –

+0

Haben Sie andere CSS-Dateien? Wenn Sie die generierte Quelle im Browser anzeigen und die CSS-Datei nachschlagen, was bekommen Sie? Es kann sein, dass 'custom.css' nicht enthalten ist (abhängig von' default.css'). Ein anderes Problem könnte sein, dass Sie Ihre Datei '.css' anstelle von' .scss' benannt haben. – wvengen

+1

posten Sie bitte application.css Datei –

Antwort

0

Versuchen Umbenennung custom.css zu custom.scss

+0

die Datei wird eigentlich als custom.css.scss benannt –