कई और / या बूटस्ट्रैप कंटेनर नेस्टेड?

Question

मेरी समझ यह है कि सभी बूटस्ट्रैप-स्टाइल तत्व एक <div class="container">तत्व के अंदर मौजूद होने चाहिए । लेकिन कभी-कभी मैं बूटस्ट्रैप के उदाहरण देखता हूं जहां कई "कंटेनर" हैं:

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

मेरे सवाल:

1. आपको कई "कंटेनर divs" वाले एकल HTML पृष्ठ की आवश्यकता कब होगी? केवल एक बड़े "कंटेनर डिव" के अंदर पूरे शरीर को डालने के विपरीत इस प्रस्ताव का क्या लाभ है?
2. क्या आप कभी भी अन्य लोगों के अंदर "कंटेनर डिव्स" घोंसला बनाना चाहेंगे? कब क्यों?

Comments

यदि आप पूर्ण-चौड़ाई वाले हिंडोला का उपयोग कर रहे हैं, तो इसमें कैप्शन के लिए कंटेनर का उपयोग किया गया है, इसलिए इसे कंटेनर में नहीं होना चाहिए। उसकी वजह से आपके ऊपर एक कंटेनर और उसके नीचे एक कंटेनर हो सकता है।

— आइब्रीएन

जबकि @Christina सही है कि डॉक्स कहते हैं कि आप घोंसला नहीं बनाते हैं, कभी-कभी इसका उपयोग किया जाता है और उपयोगी होता है। नेस्टिंग पर अतिरिक्त जानकारी के लिए stackoverflow.com/questions/29660034/… देखें ।

— जिद्दनमा

Answer 1

1. पृष्ठ के कुछ खंड पूर्ण व्यूपोर्ट चौड़ाई और अन्य नहीं करेंगे। कुछ पृष्ठभूमि पूरी चौड़ाई होगी, लेकिन सामग्री नहीं होगी।

   इसका एक उदाहरण एक फीचर क्षेत्र है जिसकी पृष्ठभूमि छवि या रंग है जो व्यूपोर्ट की पूरी चौड़ाई है, लेकिन इसके अंदर की सामग्री, रूपों या जो भी हो, .containerकिसी भी व्यूपोर्ट की चौड़ाई से अधिक नहीं है ।

2. आप डॉक्स नहीं देखते हैं .containerया नहीं । यह आवश्यक नहीं है।.container-fluid

   डॉक्स: बूटस्ट्रैप के लिए साइट की सामग्री को लपेटने और हमारे ग्रिड सिस्टम को घर में रखने के लिए एक तत्व की आवश्यकता होती है। आप अपनी परियोजनाओं में उपयोग करने के लिए दो में से एक कंटेनर चुन सकते हैं। ध्यान दें, पैडिंग और अधिक होने के कारण, न तो कंटेनर घोंसला है [न तो इसका मतलब है कि .container और .container-fluid नस्टेड नहीं है]।

Comments

मेरे पास अक्सर .container-fluidकुछ के लिए होता है जैसे कि नौसेना बार या किसी प्रकार का बैनर जबकि मुख्य साइट ए के अंदर बैठता है .container।

— डेविड ऑक्ट

@ दाविद जी, और फिर आपके पास दोहरी पैडिंग है। डॉक्स: बूटस्ट्रैप के लिए साइट की सामग्री को लपेटने और हमारे ग्रिड सिस्टम को घर में रखने के लिए एक तत्व की आवश्यकता होती है। आप अपनी परियोजनाओं में उपयोग करने के लिए दो में से एक कंटेनर चुन सकते हैं। ध्यान दें, पैडिंग और अधिक के कारण, न तो कंटेनर नेस्टेबल है। getbootstrap.com/css

— क्रिस्टीना

@DavidG। मैं .container-fluid का उपयोग नहीं करता जब तक कि तत्काल बच्चा एक .row और कॉलम न हो।

— क्रिस्टीना

न तो I। मेरा मतलब था कि मेरे पास नौसेना पट्टी के साथ एक द्रव कंटेनर होगा ताकि यह स्क्रीन के किनारों से बह जाए, फिर कंटेनर के करीब टैग के बाद, मुख्य सामग्री के साथ एक नया गैर-तरल कंटेनर शुरू करें।

— डेविड ऑक्ट

यहाँ बनाने के लिए बड़ा अंतर - शायद उन्हें सीधे नेस्टेड नहीं किया जाना चाहिए , लेकिन उन्हें नेस्टेड किया जा सकता है, और कुछ मामलों में नेस्टेड होने की आवश्यकता है । मान लें कि मेरे पास मुख्य कंटेनर के अंदर एक गद्देदार पैनल div है जो एक पंक्ति या स्तंभ नहीं है - उस स्थिति में मुझे .container-fluidपैनल के अंदर मेरी पंक्तियों / स्तंभों के आसपास एक वर्ग की आवश्यकता है ; अन्यथा मुझे एक क्षैतिज स्क्रॉलबार मिलेगा (जब तक कि पैनल के अंदर अतिप्रवाह छिपा नहीं है - लेकिन मैं ऐसा नहीं चाह सकता, शायद मैं एक स्क्रॉलबार चाहता हूं यदि अंदर बहुत अधिक डेटा हो, तो शायद एक विस्तृत तालिका हो)।

— jbyrd

Answer 2

जो कुछ कहा है उसके विपरीत, आप container-fluidअंदर एक घोंसला बना सकते हैं container। आधिकारिक बूटस्ट्रैप वेबसाइट पर एक उदाहरण भी है:

http://getbootstrap.com/examples/navbar/

Comments

यदि उस लिंक की सामग्री अंततः बदल जाती है, तो यह संस्करण 3.3 है जहां उदाहरण में एक containerघोंसला बनाना शामिल है container-fluid: दृश्य-स्रोत: getbootstrap.com/docs/3.3/examples/navbar

— रयान

Answer 3

4.3 डॉक्स के लेआउट अनुभाग में, https://getbootstrap.com/docs/4.3/layout/overview/#containers , यह अब बताता है

जबकि कंटेनरों को नेस्टेड किया जा सकता है, अधिकांश लेआउट को नेस्टेड कंटेनर की आवश्यकता नहीं होती है।

बस दूसरों को पैडिंग के बारे में क्या कहा है, आदि के बारे में पता होना चाहिए।

Answer 4

वास्तव में यह पूरी तरह से डिजाइनर की आवश्यकता पर निर्भर करता है।

कुछ बार आपको पंक्ति की पूरी चौड़ाई की आवश्यकता होती है (मेरा मतलब व्यूपोर्ट या दृश्य भाग की एक पट्टी से है जिसे आप अलग कंटेनर क्लास के बिना प्राप्त कर सकते हैं)

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

समझने के लिए टेम्पलेट उदाहरण के ऊपर देखें

Answer 5

अपना समय बचाएं और देशी CSS CSS को Css- ग्रिड में बदलें ।

बूटस्ट्रैप कंटेनरों की एक सीमा होती है, यदि आप 12 कॉलम सीमा, 10-पिक्सेल पैडिंग चुनौती की तलाश करते हैं, तो यह जोड़ना मूल नहीं है (सीएसएस बिल्टिन) जहां उपयोगकर्ता को उसकी मशीन पर डाउनलोड करने की आवश्यकता होती है, और सबसे ऊपर यह संख्या गोता लगाने के लिए जिसे आपको संसाधित करने की आवश्यकता होती है।

यह सब ध्यान में रखते हुए इसे आजमाएं और सीएसएस-ग्रिड पर स्विच करें, जो शुरू करने के लिए एक अच्छा खेल का मैदान है।

अब सीएसएस-ग्रिड के विचार में आ रहा है कि अभी भी IE के साथ संगत नहीं है।