फाउंडेशन 6: नेस्टेड पंक्ति कॉलम में पूर्ण चौड़ाई - ज़र्ब-फाउंडेशन

मैं वर्तमान में फाउंडेशन 6.3.1 का उपयोग कर रहा हूं और पूर्ण कंटेनर चौड़ाई में नेस्टिंग कॉलम ओवरराइड करने पर फंस गया हूं।

मैं जो करने की कोशिश कर रहा हूं, यहां है:

<div class="row container">
<div class="column small-8">
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
<div class="row expanded">
<div class="column full">
Full screen width content
</div>
</div>
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
</div>
</div>

https://codepen.io/maca1016/pen/QgobrJ

मुझे ब्राउज़र विंडो की पूरी चौड़ाई तक विस्तारित "पूर्ण स्क्रीन चौड़ाई सामग्री" क्षेत्र की आवश्यकता है। यदि संभव हो तो मैं ढांचे के माध्यम से इसे हासिल करना चाहता हूं। इसके बजाय उपयोग नहीं करते हैं position: absolute; समाधान के लिए।

उत्तर:

जवाब के लिए 0 № 1

मुझे लगता है कि आपको कंटेनर को ओवरराइड करने की आवश्यकता है width इस खंड के लिए घोषणा, और सामग्री को इसके कंटेनर से बड़ा करने के लिए मजबूर करें। मैंने इसे एक इनलाइन शैली के साथ मजबूर कर दिया और यह कलम में काम किया, लेकिन आप इसे साफ़ करना और जोड़ना चाहते हैं class इसके लिए, या एक ID अगर यह सिर्फ एक बंद उपयोग है।

<div class="row expanded">
<div style="width:150%!important;" class="column full">
Full screen width content
</div>
</div>

https://codepen.io/anon/pen/JJzJQv


जवाब के लिए 0 № 2

क्या इसके लिए कोई विशेष कारण है .row.container यह सब लपेट रहा है ?, मुझे लगता है कि समाधान उन चीज़ों को स्पष्ट रूप से ले रहा है जिन्हें आपको किसी भी चीज को जोड़ने के बिना उस कंटेनर से पूरी चौड़ाई (.row.expanded और उसके बच्चों) की आवश्यकता है।

उम्मीद है की यह मदद करेगा।


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