मैं ज़र्ब फाउंडेशन में पंक्ति चौड़ाई कैसे बढ़ा सकता हूं?

Question

हे दोस्तों मैं यहाँ एक नौसिखिया हूँ। मैं ज़र्ब नींव सीख रहा हूं और मेरा सवाल यह है कि मैं ढांचे में पंक्ति की डिफ़ॉल्ट चौड़ाई कैसे बढ़ा सकता हूं। जैसे 960 ग्रिड सिस्टम में 960 पीएक्स है। मैं पंक्ति की इच्छा को 1200px तक कैसे बढ़ा सकता हूं, इसलिए क्या मुझे कस्टम स्टाइलशीट जोड़ना चाहिए? कृपया मदद करें, धन्यवाद।

Answer 1

आपको !important का उपयोग करने की आवश्यकता नहीं है। बस अपने नए जगह सीएसएस-कहना app.css -below foundation.css और निम्न का उपयोग करें:

.row { 
    max-width: .px; 
} 

तुम भी अन्य वर्ग का उपयोग करें और इस संपत्ति में जोड़ सकते हैं इतना है कि यह डिफ़ॉल्ट पंक्ति के साथ संघर्ष नहीं होगा।

Answer 2

अपनी .row कक्षा की अधिकतम-चौड़ाई वाली संपत्ति को ओवरराइड करें, और इसे अपनी इच्छित चौड़ाई पर सेट करें।

.row { 
    max-width: ...px !important; 
} 

you'r एस.ए.एस.एस. का उपयोग कर रहे हैं, तो ग्रिड चर documentation, जहाँ आप कैसे पंक्ति चौड़ाई, गटर चौड़ाई और अधिक ओवरराइड करने के लिए पर जानकारी मिल जाएगा में लिए खोज करें।

$row-width: em-calc(1000); 

Answer 3

_settings.scss अपनी परियोजना में नींव की फ़ाइल पर जाने का बेहतर तरीका है, अगर आपके पास _settings.css फ़ाइल नहीं है या यदि आप इसके स्थान को नहीं जानते हैं तो कृपया ऑनलाइन जांचें। बस इसे खोलें और

$row-width: rem-calc(980); //change up to what you want 

और यह ऊपरी मान पंक्ति-चौड़ाई उत्पन्न करेगा जैसा कि नीचे मूल्य i.e 61.25rem है।

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */ 
.row { 
    margin: 0 auto; 
    max-width: 61.25rem; 
    width: 100%; 
} 

लेकिन अब आप 1280 की तरह कुछ करने के लिए 980 से उस पंक्ति-चौड़ाई परिवर्तित करते हैं जैसे उदाहरण नीचे

$row-width: rem-calc(1280); 

तो आप नीचे देख सकते है कि मेरे सीएसएस नई अधिकतम-चौड़ाई के साथ स्वचालित रूप से उत्पन्न होता है,

/* line 228, ../../bower_components/foundation/scss/foundation/components/_grid.scss */ 
.row { 
    margin: 0 auto; 
    max-width: 80rem; 
    width: 100%; 
} 

उस सेटिंग से सावधान रहें क्योंकि आप पूरी वेबसाइट के रूप और रूपरेखा को बड़े पैमाने पर बदल सकते हैं। http://foundation.zurb.com/sites/docs/grid.html#fluid-row

हालांकि यह अभी भी गद्दी के साथ समस्याओं में परिणाम है, पता नहीं है कि यह कैसे तय करने के लिए:

Answer 4

फाउंडेशन 6 चौड़ाई तरल पदार्थ बनाने के लिए वर्ग .expanded परिचय देता है।