Переопределить загрузочные переменные в twitter-bootstrap-rails gem

Question

Как использовать пользовательские переменные при использовании twitter-bootstrap-rails gem? Я хочу изменить ширину по умолчанию для системы сетки и добавил следующую строку в мой bootstrap_and_overrides файла и ничего не происходит ...

@gridColumnWidth: 50px; 

Что я делаю неправильно?

Вот мои bootstrap_and_overrides файл:

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 мой applicaiton.css файл:

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

Попробуйте удалить эту строку:

@import "twitter/bootstrap/responsive"; 

Я считаю, что реагирующие запросы СМИ переопределения @gridColumnWidth, когда ваше окно просмотра не соответствует по умолчанию.

Answer 2

Входят ли файл application.css эту строку?

*= require bootstrap_and_overrides 

Answer 3

Я использую Twitter Bootstrap и я могу установить ширину столбца следующим образом:

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

Тогда мой макет просто есть:

= stylesheet_link_tag "admin_bootstrap" 

Колонны все произведение хорошо.

Answer 4

Хотя я использую преобразованную версию sass, я могу ошибаться, но поскольку bootstrap обрабатывается с меньшим количеством движков, я думаю, вам нужно определить переопределение перед импортом самого загрузочного файла.

Moving:

@gridColumnWidth: 50px; 

очень первая строка файла может решить эту проблему. Как я понимаю, первое объявление переменных используется (они рассматриваются как константы).

В отличие от определения выше, если вы хотите переопределить определения CSS, вам необходимо определить, что после импорта вы хотите переопределить.

Answer 5

Я не уверен, какова сделка, так как это работает для меня. Я добавил точную переменную в той же строке, что и в вашем примере.

В моей Gemfile:

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

Я следовал guide для этой работы.

Разве вы не запускали генератор, или используете другой камень?

Answer 6

переопределить bootstrap_and_overrrides.css.less, запускать эту Rake задачу:

rake assets:clean 
rake assets:precompile