Zastępowanie zmiennych bootstrap w gemie twitter-bootstrap-rin gem

Question

Jak używać zmiennych niestandardowych podczas korzystania z klejnotu twitter-bootstrap-rails? Chcę zmienić szerokości domyślne dla systemu sieci i dodali następującą linię do moich bootstrap_and_overrides plik i nic się nie dzieje ...

@gridColumnWidth: 50px; 

Co robię źle?

Oto moje bootstrap_and_overrides file:

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; 

Herezje mój applicaiton.css file:

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

Spróbuj usunąć tę linię:

@import "twitter/bootstrap/responsive"; 

wierzę, że reagujące zapytań o media przesłonić @gridColumnWidth gdy rzutnia nie zgadza się z domyślną.

Answer 2

Czy Twój plik application.css obejmują ten wiersz?

*= require bootstrap_and_overrides 

Answer 3

Używam twitter bootstrap i mogę ustawić szerokość kolumny tak:

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"; 

Wtedy mój układ ma tylko:

= stylesheet_link_tag "admin_bootstrap" 

Kolumny wszystkie wypracować dobrze.

Answer 4

Podczas korzystania z przekonwertowanej wersji sass, mogę być w błędzie, ale ponieważ bootstrap jest przetwarzany przez mniejszą liczbę silników, domyślam się, że musisz zdefiniować przesłonięcie przed zaimportowaniem samego bootstrap.

Moving:

@gridColumnWidth: 50px; 

do bardzo pierwszy wiersz pliku może rozwiązać ten problem. Jak rozumiem, pierwsza deklaracja zmiennych jest używana (są one traktowane jako stałe).

W przeciwieństwie do powyższej definicji, jeśli chcesz zastąpić definicje CSS, musisz zdefiniować to po wszystkich importach, które chcesz przesłonić.

Answer 5

Nie jestem pewien, jaka byłaby umowa, ponieważ to działa dla mnie. Dodałem dokładną zmienną w tym samym wierszu, co w twoim przykładzie.

W moim Gemfile:

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

Mam po guide to zadziałało.

Czy nie uruchomiłeś generatora, czy używasz innego klejnotu?

Answer 6

aby przesłonić bootstrap_and_overrrides.css.less uruchomić te zadania Rake:

rake assets:clean 
rake assets:precompile