覆盖 twitter-bootstrap-rails gem 中的引导变量答案

【问题标题】：Override bootstrap variables in twitter-bootstrap-rails gem覆盖 twitter-bootstrap-rails gem 中的引导变量
【发布时间】：2012-05-10 13:07:48
【问题描述】：

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

【问题讨论】：

我在某处读到，在 application.css 文件中的 require_tree 语句之后不应添加任何内容。尝试移动 require bootstrap_and_overrides 之前。
什么都没有。我应该再次预编译吗？在 require_tree 之后覆盖文件中的这个点呢？
require_tree后面的点表示包含当前目录下的所有CSS文件。
您是否尝试过更改文件开头的变量？我不能说 .LESS 版本，但在 SASS 版本中，要更改这些变量，必须在文件开头定义它们。因为当您导入bootstrap 时 - 网格计算基于此变量。如果失败，您可以更改 Gem 中的变量。但最好使用 bootstrap-sass：在新版本中，您甚至可以更改网格的宽度以实现自适应页面布局。
我也面临同样的问题。尝试按照 Josh Lewis 的建议评论响应行。

标签： ruby-on-rails twitter-bootstrap twitter-bootstrap-rails

【解决方案1】：

尝试删除此行：

@import "twitter/bootstrap/responsive";

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

【讨论】：

在 Rails 3.2.9 中，资产管道（Sprockets）通常不需要重启来重新编译更少的导入。所以，我怀疑这是关于重新定义值的媒体查询。

【解决方案2】：

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

*= require bootstrap_and_overrides

【讨论】：

我现在添加了，但没有任何变化？
是否也重启了服务器/重新编译了资产？
我运行了 rake assets:precompile 并更改了列宽。你是说其他命令？
你能粘贴你的 application.css overrides.css 文件吗？

【解决方案3】：

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

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"

列都可以正常工作。

【讨论】：

【解决方案4】：

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

移动：

@gridColumnWidth: 50px;

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

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

【讨论】：

【解决方案5】：

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

在我的 Gemfile 中：

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

我已按照guide 进行操作。

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

【讨论】：

【解决方案6】：

要覆盖bootstrap_and_overrrides.css.less，运行这些 Rake 任务：

rake assets:clean 
rake assets:precompile

【讨论】：