नेस्टेड पंक्ति में दूसरा आइटम हमेशा अतिरिक्त मार्जिन जोड़ता है, लेआउट को फेंक देता है - ज़र्ब-फाउंडेशन

मैं फाउंडेशन 5 के साथ काम कर रहा हूं, मेरी अपनी कस्टम शैलियों में से कोई भी नहीं। मैं लिंक कर रहा हूं, क्रम में, app.css, modernizr.js, jQuery, फास्टक्लिक, और foundation.min.js

मैंने अपने ट्यूटोरियल में निर्देशों का पालन किया है("लिंडा: अप एंड रनिंग विद फाउंडेशन") और ज़र्ब वेबसाइट पर नेस्टेड पंक्ति बनाने के लिए, लेकिन वहां एक समस्या है: पंक्ति में अंतिम सेल हमेशा एक छोटी राशि से कूदता है, न केवल पाठ प्रवाह को फेंकता है लेकिन पूरे पेज लेआउट। मोबाइल उपकरणों पर, इस छोटे से झुकाव का मतलब है कि पृष्ठ को तरफ से स्वाइप किया जा सकता है।

यहां एक स्क्रीनशॉट है जिसके बारे में मैं बात कर रहा हूं

मेरा एचटीएमएल है

<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We"re Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>

मैंने क्या गल्त किया है?मैं इस बारे में Google या StackOverflow पर कोई भी जानकारी नहीं देख सकता, मैं कोड को ध्यान से चला गया हूं, मैंने इसे नीचे फेंक दिया है और कोड नमूने के बाद इसे स्क्रैच से फिर से लिखा है ... मैं बस जो कुछ प्राप्त नहीं करता हूं चुक गया।

उत्तर:

उत्तर № 1 के लिए 1

इसलिए, हालांकि बड़े-3 कॉलम का अनुमान लगाया जाता हैसही आउटपुट आपको थोड़ा अलग संरचना की आवश्यकता है। चीजों को करने के कई तरीके हैं, लेकिन याद रखने की बात यह है कि यदि आप ग्रिड या नेस्टेड ग्रिड का उपयोग कर रहे हैं, तो सभी कॉलमों को कुल 12 कॉलम जोड़ना होगा। आपके मामले में आपके पास एक घोंसला वाला ग्रिड है जो 6 तक जोड़ता है। यह आपको असंगत आउटपुट देगा जब तक कि आप कॉलम के हिस्से को खाली न होने का इरादा रखते हैं। उस स्थिति में आप बाएं फ्लोट करने के लिए मजबूर करने के लिए .end प्रस्तुति वर्ग का उपयोग कर सकते हैं।

यहां नेस्टेड ग्रिड का एक सेट है जो अनुमान लगाता है कि आप क्या सोच रहे हैं कि आप जा रहे हैं।

<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We"re Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>

संबंधित सवाल
सबसे लोकप्रिय