5

¿Cómo usar variables personalizadas al usar twitter-bootstrap-rails gem? Quiero cambiar los anchos predeterminados para el sistema de rejilla y he añadido la siguiente línea a mis bootstrap_and_overrides archivo y no pasa nada ...Anula las variables de arranque en twitter-bootstrap-rails gem

@gridColumnWidth: 50px; 

¿Qué estoy haciendo mal?

Aquí está mi bootstrap_and_overrides archivo:

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 mi applicaiton.css archivo:

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 } 
+0

He leído en alguna parte que nada debe añadirse después de la declaración require_tree en el archivo application.css. Intenta mover requiere bootstrap_and_overrides antes. – sailor

+0

nada. ¿Debería precompilar de nuevo? y ¿qué pasa con este punto que sobrescribe el archivo después de require_tree? – oFca

+0

El punto después de require_tree indica que se incluyen todos los archivos CSS en el directorio actual. – sailor

Respuesta

8

Trate de no incluir esta línea:

@import "twitter/bootstrap/responsive"; 

creo que las preguntas de los medios de respuesta anulan la @gridColumnWidth cuando su visor no coincide con el valor predeterminado.

+0

Con Rails 3.2.9, la canalización de activos (Sprockets) no suele requerir un reinicio para recompilar menos importaciones. Entonces, sospecho que se trata de las consultas de medios que redefinen los valores. –

3

¿Su archivo incluye application.css esta línea?

*= require bootstrap_and_overrides 
+0

Lo agregué ahora pero nada cambia? – oFca

+0

¿También reinició el servidor/recursos recompilados? – flooooo

+0

ejecuté recursos de rake: precompilación y cambio con anchos de columna. ¿Te refieres a algún otro comando? – oFca

1

estoy usando arranque twitter y me puse mi ancho de columna, así:

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

Entonces mi diseño sólo tiene:

= stylesheet_link_tag "admin_bootstrap" 

Columnas todos funciona bien.

1

Mientras estoy usando la versión convertida de sass, podría estar equivocado, pero, como el arranque es procesado por menos motor, supongo que debe definir la anulación antes de importar la rutina de arranque.

en Movimiento:

@gridColumnWidth: 50px; 

a primera línea del archivo puede resolver el problema. Según entiendo, se usa la primera declaración de las variables (estas se tratan como constantes).

Al contrario de la definición anterior, si desea sobrescribir las definiciones de CSS, debe definir eso después de la importación que desea sobrescribir.

1

No estoy seguro de cuál sería el trato, ya que esto funciona para mí. Agregué la variable exacta en la misma línea que tienes en tu ejemplo.

En mi Gemfile:

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

que han seguido el guide para que esto funcione.

¿No ejecutó el generador o está usando una gema diferente?

+0

No es una buena idea colocar la gema 'twitter-bootstrap-rails' en el grupo' assets' ya que tiene algunos ayudantes y otras cosas que no funcionarán si la coloca allí. –

0

para anular la bootstrap_and_overrrides.css.less, ejecutar estas tareas Rake:

rake assets:clean 
rake assets:precompile