覆盖twitter-bootstrap-rails gem中的bootstrap变量

Question

How to use custom variables when using twitter-bootstrap-rails gem? I want to change the default widths for the grid system and have added the following line to my bootstrap_and_overrides file and nothing happens...

@gridColumnWidth: 50px;

What am I doing wrong?

Here's my 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;

Heres my 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

Try removing this line:

@import "twitter/bootstrap/responsive";

I believe that the responsive media queries override the @gridColumnWidth when your viewport doesn't match the default.

Answer 2

您的application.css文件是否包含此行？

*= require bootstrap_and_overrides

Answer 3

I am using twitter bootstrap and I set my column width like so:

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

Then my layout just has:

= stylesheet_link_tag "admin_bootstrap"

Columns all work out fine.

Answer 4

While I'm using sass converted version, I might be wrong but, since bootstrap is processed by less engine, I guess you need to define the override before importing bootstrap itself.

Moving:

@gridColumnWidth: 50px;

to very first line of the file may solve the problem. As my understanding, first declaration of the variables are used (these are treated as constants).

On contrary to above definition, if you want to override CSS definitions, you need to define that after all import you want to override.

Answer 5

I'm not sure what the deal would be, since this works for me. I added the exact variable on the same line as you have in your example.

In my Gemfile:

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

I have followed the guide for this to work.

Did you not run the generator, or are you using a different gem?

Answer 6

to override the bootstrap_and_overrrides.css.less , run these Rake tasks:

rake assets:clean 
rake assets:precompile