ट्विटर-बूटस्ट्रैप-रेल मणि में बूटस्ट्रैप चर को ओवरराइड करें

Question

twitter-bootstrap-rails मणि का उपयोग करते समय कस्टम चर का उपयोग कैसे करें? मैं ग्रिड प्रणाली के लिए डिफ़ॉल्ट चौड़ाई बदलना चाहते हैं और फ़ाइल और कुछ नहीं होता मेरी bootstrap_and_overrides में निम्न पंक्ति को शामिल किया है ...

@gridColumnWidth: 50px; 

क्या मैं गलत कर रहा हूँ?

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 फ़ाइल इस लाइन शामिल हैं

यहाँ मेरी bootstrap_and_overrides फ़ाइल है?

*= require bootstrap_and_overrides 

Answer 3

मैं चहचहाना बूटस्ट्रैप का उपयोग कर रहा हूँ और मैं तो जैसे मेरे कॉलम चौड़ाई सेट:

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

जबकि मैं सैस रूपांतरित संस्करण का उपयोग कर रहा हूं, लेकिन मैं गलत हो सकता हूं, चूंकि बूटस्ट्रैप को कम इंजन द्वारा संसाधित किया जाता है, मुझे लगता है कि बूटस्ट्रैप को आयात करने से पहले आपको ओवरराइड को परिभाषित करने की आवश्यकता है।

स्थानांतरण:

@gridColumnWidth: 50px; 

फ़ाइल समस्या का समाधान हो सकता है के पहले लाइन के लिए। मेरी समझ के रूप में, चर की पहली घोषणा का उपयोग किया जाता है (इन्हें स्थिरांक माना जाता है)।

उपर्युक्त परिभाषा के विपरीत, यदि आप सीएसएस परिभाषाओं को ओवरराइड करना चाहते हैं, तो आपको यह परिभाषित करने की आवश्यकता है कि सभी आयात के बाद आप ओवरराइड करना चाहते हैं।

Answer 5

मुझे यकीन नहीं है कि सौदा क्या होगा, क्योंकि यह मेरे लिए काम करता है। मैंने आपके उदाहरण में उसी पंक्ति पर सटीक चर जोड़ा है।

मेरी Gemfile में:

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

मैं इस काम करने के लिए guide पालन किया है।

क्या आपने जनरेटर नहीं चलाया, या आप एक अलग मणि का उपयोग कर रहे हैं?

Answer 6

bootstrap_and_overrrides.css.less ओवरराइड, इन रैक कार्यों को चलाने के लिए:

rake assets:clean 
rake assets:precompile