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

これは私にとってはうまくいくので、取引がどうなるかわかりません。例と同じ行に正確な変数を追加しました。

私のGemfileで：

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

これが機能するためのガイドに従いました。

ジェネレーターを実行していませんか、それとも別の gem を使用していますか?

于 2012-05-21T18:35:21.020 に答える
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 変換版を使っているので間違っているかもしれませんが、bootstrap はより少ないエンジンで処理されるため、bootstrap 自体をインポートする前にオーバーライドを定義する必要があると思います。

移動:

@gridColumnWidth: 50px;

ファイルの最初の行に追加すると、問題が解決する場合があります。私の理解では、変数の最初の宣言が使用されます（これらは定数として扱われます）。

上記の定義とは逆に、CSS 定義をオーバーライドしたい場合は、オーバーライドしたいインポートをすべて定義する必要があります。

于 2012-05-21T03:01:53.320 に答える
0

をオーバーライドするbootstrap_and_overrrides.css.lessには、次の Rake タスクを実行します。

rake assets:clean 
rake assets:precompile
于 2013-05-24T07:46:20.013 に答える