Bootstrap-Variablen in twitter-bootstrap-rails überschreiben Gem

Question

Wie verwendet man benutzerdefinierte Variablen bei der Verwendung von twitter-bootstrap-rails gem? Ich möchte die Standardbreiten für das Grid-System ändern und haben die folgende Zeile in meinem bootstrap_and_overrides Datei und nichts passiert ...

@gridColumnWidth: 50px; 

Was mache ich falsch hinzugefügt?

Hier ist meine bootstrap_and_overrides Datei:

3 @import "twitter/bootstrap/bootstrap"; 
    4 body { padding-top: 60px; } 
    5  
    6 @import "twitter/bootstrap/responsive"; 
    7  
    8 // Set the correct sprite paths 
    9 @iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png'); 
10 @iconWhiteSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings-white.png'); 
11  
12 // Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines) 
13 @fontAwesomeEotPath: asset-path('fontawesome-webfont.eot'); 
14 @fontAwesomeWoffPath: asset-path('fontawesome-webfont.woff'); 
15 @fontAwesomeTtfPath: asset-path('fontawesome-webfont.ttf'); 
16 @fontAwesomeSvgzPath: asset-path('fontawesome-webfont.svgz'); 
17 @fontAwesomeSvgPath: asset-path('fontawesome-webfont.svg'); 
18 
19 // Font Awesome 
20 @import "fontawesome"; 
21 
22 // Your custom LESS stylesheets goes here 
23 // 
24 // Since bootstrap was imported above you have access to its mixins which 
25 // you may use and inherit here 
26 // 
27 // If you'd like to override bootstrap's own variables, you can do so here as well 
28 // See http://twitter.github.com/bootstrap/less.html for their names and documentation 
29 // 
30 // Example: 
31 // @linkColor: #ff0000;  
32 
33 // ----------------------------------------------------- 
34  
35 @gridColumnWidth: 50px; 

Heres meine applicaiton.css Datei:

1 /* 
    2 * This is a manifest file that'll be compiled into application.css, which will include all the files 
    3 * listed below.   
    4 * 
    5 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
    6 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. 
    7 * 
    8 * You're free to add application-wide styles to this file and they'll appear at the top of the 
    9 * compiled file, but it's generally better to create a new file per style scope. 
10 * 
11 *= require_self 
12 *= require_tree .   
13 *= require bootstrap_and_overrides 
14 */ 
15  
16  
17 .my_background_plate {  
18 background-color: #eee; 
19 border: 1px #ddd solid; 
20 -moz-border-radius: 5px; 
21 border-radius: 5px; 
22 padding: 15px; 
23 margin-bottom: 15px; 
24 margin-top: 15px;   
25 } 
26 
27 .my_crud_btn {    
28 margin-top: 5px;   
29 margin-left: 15px;  
30 } 
31 
32 #footer {     
33 margin: 15px 0;   
34 background-color: black; 
35 } 

Answer 1

Versuchen Sie diese Zeile entfernen:

@import "twitter/bootstrap/responsive"; 

Ich glaube, dass die reaktions Medien-Anfragen die @gridColumnWidth außer Kraft setzen, wenn das Ansichtsfenster nicht den Standard entspricht.

Answer 2

Hat Ihr application.css Datei diese Zeile enthalten?

*= require bootstrap_and_overrides 

Answer 3

I twitter Bootstrap bin mit und richte ich Spaltenbreite wie folgt:

bootstrap.scss

/* 
*= require bootstrap-colorpicker/bootstrap-colorpicker 
*/ 

$gridColumns: 24; 
$gridColumnWidth: 30px; 
$gridGutterWidth: 10px; 
$linkColorHover: #08c; 

@import "colors"; 
@import "bootstrap"; 
@import "compass"; 
@import "mixins"; 
@import "common_bootstrap"; 
@import "admin/bootstrap/main_layout"; 
@import "admin/bootstrap/devise"; 

Dann ist mein Layout hat gerade:

= stylesheet_link_tag "admin_bootstrap" 

Spalten alle gut arbeiten.

Answer 4

Während ich Sass konvertierte Version verwende, könnte ich falsch liegen, aber da Bootstrap von weniger Engine verarbeitet wird, denke ich, müssen Sie die Überschreibung vor dem eigentlichen Bootstrap zu definieren.

Umzug:

@gridColumnWidth: 50px; 

auf erste Zeile der Datei kann das Problem lösen. Nach meinem Verständnis wird die erste Deklaration der Variablen verwendet (diese werden als Konstanten behandelt).

Im Gegensatz zur obigen Definition müssen Sie, wenn Sie CSS-Definitionen überschreiben möchten, dies nach dem Import, den Sie überschreiben möchten, definieren.

Answer 5

Ich bin mir nicht sicher, was der Deal wäre, da dies für mich funktioniert. Ich habe die genaue Variable in derselben Zeile wie in Ihrem Beispiel hinzugefügt.

In meinem Gemfile:

group :assets do 
    gem "twitter-bootstrap-rails" 
    gem "therubyracer" 
    end 

Ich habe die guide dafür gefolgt zu arbeiten.

Haben Sie den Generator nicht ausgeführt, oder verwenden Sie einen anderen Edelstein?

Answer 6

die bootstrap_and_overrrides.css.less, führen diese Rake Aufgaben außer Kraft zu setzen:

rake assets:clean 
rake assets:precompile