2012-05-07 16 views
13

this example layout में मैं केवल नायक इकाई 100% चौड़ा होना चाहता हूं और डिफ़ॉल्ट ग्रिड के भीतर आराम करना चाहता हूं। उदाहरण के लिए, check this site। इसमें केवल चौड़ाई में नायक इकाई भाग (शोकेस क्षेत्र) है और निश्चित चौड़ाई (नेविगेशन, नीचे सामग्री, पाद लेख) में बाकी है।ट्विटर में पूर्ण चौड़ाई नायक इकाई बूटस्ट्रैप

मुझे उत्तरदायी डिज़ाइन सुविधा खोए बिना ऐसा करने की आवश्यकता है।

उत्तर

20

अपने div को अपने .container div के बाहर ले जाएं।

.container शैली आपको एक सेट चौड़ाई तक सीमित रखती है। और इसके अंदर कुछ भी इसके माता-पिता की अधिकतम चौड़ाई होगी। के बजाय:

<div class="container"> 
    <div class="hero-unit"> 
    </div> 
</div> 

उपयोग:

<div class="hero-unit"> 
</div> 
<div class="container"> 
</div> 
+0

धन्यवाद! यह बहुत अच्छा काम किया। –

5

खैर जवाब सही है, लेकिन जब भी आप साइट का आकार बदलने, नायक-इकाई तो (, 20px सही 20px बाएं) रिक्त स्थान के आसपास है करने के लिए बदल जाएगा क्योंकि सभी तत्व इस body has paddings in @media max-width: 767px से बंधे हैं। बस नीचे दिए गए कोड में यह भी तय करने के लिए है:

@media (अधिकतम-चौड़ाई: 767px) { .hero-कंटेनर { मार्जिन-सही: -20px; मार्जिन-बाएं: -20 पीएक्स; } }

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