2013-07-09 6 views
9

डिफ़ॉल्ट रूप से, ज़र्ब फाउंडेशन 4 और 5 में पंक्तियां 1000px की अधिकतम चौड़ाई पर चलती हैं, यहां तक ​​कि बहुत बड़े मॉनीटर पर भी, जो सामग्री के दोनों तरफ मार्जिन बनाती हैं। मैं इसे डिजाइन की प्रतिक्रिया को प्रभावित किए बिना पूर्ण स्क्रीन पर कैसे चला सकता हूं?मैं ज़र्ब फाउंडेशन 4/5 पूर्ण स्क्रीन में पंक्तियां कैसे बना सकता हूं?

+0

स्वीकार किए जाते हैं जवाब मुझे शुरू हुई लेकिन मुझे इसका इस्तेमाल करना पड़ा: बॉडी, एचटीएमएल, .रो {मार्जिन: 0 पीएक्स; चौड़ाई: 100%! महत्वपूर्ण; न्यूनतम चौड़ाई: 100%! महत्वपूर्ण; } –

उत्तर

20

सीएसएस फ़ाइल के लिए निम्न कोड जोड़ें:

+0

मुझे यह पसंद नहीं है क्योंकि यह पूरे पृष्ठ को 100% बनाता है। यदि आप केवल एक पाद लेख या शीर्षलेख 100% बनाना चाहते थे तो नीचे मेरा उदाहरण देखें। – Tom

+0

ठीक है, हाँ, जाहिर है; लेकिन यह मूल सवाल नहीं है। टिप्पणियों में आपके द्वारा उठाए गए प्रश्न का आपका पूर्ण जवाब है। – BFWebAdmin

+0

@BFDatabaseAdmin का उपयोग कर! महत्वपूर्ण स्टाइलशीट को बर्बाद करने का एक अच्छा तरीका है। कोई भी .row.narrow न्यूनतम-चौड़ाई सेट करने में सक्षम नहीं होगा: 50% क्योंकि स्टैक ओवरफ्लो टिप्पणी थ्रेड पर किसी के पास एक स्वीकार्य उत्तर होता है जो कहता है कि आधार .row शैली में डिफ़ॉल्ट न्यूनतम चौड़ाई को ओवरराइड करने के लिए एक महत्वपूर्ण टैग होना चाहिए पंक्ति पर ... – Lotus

5

आप सास/कम्पास, zurb-foundation मणि, या एक स्वनिर्धारित फाउंडेशन वितरण का उपयोग कर रहे हैं, तो आप $row-width चर सेट कर सकते हैं। यह कहीं भी इस्तेमाल होने के माध्यम से बह जाएगा। आप समायोजित भी कर सकते हैं, उदाहरण के लिए, कॉलम की संख्या, गटर चौड़ाई, और इसी तरह।

ग्रिड प्रलेखन के नीचे अधिक बताते हैं: http://foundation.zurb.com/docs/components/grid.html

9

मुझे लगता है कि यह करने के लिए सबसे अच्छा तरीका यह की तरह है।

अपने सीएसएस या css-

.row.full-width { 
    width: 100%; 
    max-width: 100%; 
} 
फिर अपने html में

एक कस्टम में इस जोड़े, इस-

<div class="row full-width"> </div> 

कर यह आपको घटना में चातुर्य में ग्रिड प्रणाली रखने के लिए अनुमति देगा आप केवल हेडर या पाद लेख के लिए पूर्ण स्क्रीन का उपयोग करना चाहते हैं।

-5
<div class="row"> 
    <div class="large-6 columns"></div> 
    <div class="large-6 columns"></div> 
</div> 

इस 1000px

<div class="large-6 columns"></div> 
<div class="large-6 columns"></div> 

की चौड़ाई दे देंगे, लेकिन यदि आप पंक्तियों वर्ग के बिना स्तंभ वर्ग का उपयोग आप फुलस्क्रीन मिल जाएगा ...

+0

पंक्तियों को जोड़ने से ज़र्ब की मौलिक ग्रिड-आधारित संरचना खो जाती है। – BFWebAdmin

संबंधित मुद्दे