5

使用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 }
4

6 回答 6

8

尝试删除此行：

@import "twitter/bootstrap/responsive";

我相信当您的视口与默认值不匹配时，响应式媒体查询会覆盖 @gridColumnWidth。

于 2012-05-21T02:42:41.363 回答
3

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

*= require bootstrap_and_overrides
于 2012-05-10T13:14:47.210 回答
1

我正在使用 twitter 引导程序，我将列宽设置如下：

引导程序.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"

列都很好。

于 2012-05-20T01:20:27.850 回答
1

虽然我使用的是 sass 转换版本，但我可能错了，但是由于引导程序由较少的引擎处理，我想您需要在导入引导程序本身之前定义覆盖。

移动：

@gridColumnWidth: 50px;

到文件的第一行可能会解决问题。据我了解，使用了变量的第一个声明（这些被视为常量）。

与上面的定义相反，如果你想覆盖 CSS 定义，你需要定义你想要覆盖的所有导入。

于 2012-05-21T03:01:53.320 回答
1

我不确定这笔交易会是什么，因为这对我有用。我在与您的示例相同的行上添加了确切的变量。

在我的 Gemfile 中：

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

我已按照指南进行操作。

您没有运行生成器，还是使用了不同的 gem？

于 2012-05-21T18:35:21.020 回答
0

要覆盖bootstrap_and_overrrides.css.less，请运行以下 Rake 任务：

rake assets:clean 
rake assets:precompile
于 2013-05-24T07:46:20.013 回答