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;

继承我的 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由较少的引擎处理，我想你需要在导入bootstrap之前定义覆盖。

动：

@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

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

6 个答案: