बूटस्ट्रैप ग्रिड सिस्टम के साथ नेस्टेड पंक्तियाँ?

Question

मैं इस तरह से 2x2 प्रारूप में 4 छोटी छवियों के साथ 1 बड़ी छवि चाहता हूं:

मेरा प्रारंभिक विचार एक पंक्ति में सब कुछ घर करना था। फिर दो कॉलम बनाएं, और, दूसरे कॉलम में, 1x1 और 2x2 प्रभाव बनाने के लिए दो पंक्तियों और दो कॉलम बनाएं।

हालाँकि, यह संभव प्रतीत नहीं होता है, या मैं इसे सही ढंग से नहीं कर रहा हूँ?

Comments

कृपया HTML / CSS पोस्ट करें जिसे आपने अब तक आज़माया है।

— स्टीव सैंडर्स

इसे आज़माएं: jsfiddle.net/KXje2/9 मैंने अपने फिडेल को अतिरिक्त छोटे स्क्रीन के माध्यम से समायोजित करने के लिए संपादित किया।

— बौद्धकाल

क्या आपके लिए उपरोक्त कोड काम कर रहा है? ...

— बुद्धिस्ट

Answer 1

बूटस्ट्रैप संस्करण 3.x

हमेशा की तरह, बूटस्ट्रैप के महान दस्तावेज पढ़ें:

3.x डॉक्स : https://getbootstrap.com/docs/3.3/css/#grid-nesting

सुनिश्चित करें कि मूल स्तर पंक्ति एक .containerतत्व के अंदर है । जब भी आप पंक्तियों को घोंसला बनाना चाहते हैं, बस .rowअपने कॉलम के अंदर एक नया खोलें ।

यहाँ से काम करने के लिए एक सरल लेआउट है:

<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="big-box">image</div>
        </div>
        <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-6"><div class="mini-box">1</div></div>
                <div class="col-xs-6"><div class="mini-box">2</div></div>
                <div class="col-xs-6"><div class="mini-box">3</div></div>
                <div class="col-xs-6"><div class="mini-box">4</div></div>
            </div>
        </div>
    </div>
</div>

बूटस्ट्रैप संस्करण 4.0

4.0 डॉक्स : http://getbootstrap.com/docs/4.0/layout/grid/#nesting

यहां 4.0 के लिए एक अद्यतन संस्करण है, लेकिन आपको ग्रिड पर पूरे डॉक्स अनुभाग को वास्तव में पढ़ना चाहिए ताकि आप समझ सकें कि इस शक्तिशाली सुविधा का लाभ कैसे उठाया जाए

<div class="container">
  <div class="row">
    <div class="col big-box">
      image
    </div>

    <div class="col">
      <div class="row">
        <div class="col mini-box">1</div>
        <div class="col mini-box">2</div>
      </div>
      <div class="row">
        <div class="col mini-box">3</div>
        <div class="col mini-box">4</div>
      </div>
    </div>

  </div>
</div>

फिडल में डेमो jsFiddle 3.x | jsFiddle 4.0

जो इस तरह दिखेगा ( थोड़ा स्टाइल के साथ )

Comments

एक 1 साल पुराने धागे को अपहृत करने के लिए क्षमा करें, लेकिन क्या आप जानते हैं कि छवि और 1 और 3 के बीच 0px कैसे प्राप्त करें

— एलेक्स

@alex, सुनिश्चित - बस तत्व margin: 0;पर सेट .mini-box। मेरा उदाहरण केवल स्पष्टता के लिए एक जोड़ रहा था, लेकिन आप पूरी तरह से लाइन को हटा सकते हैं। यहाँ एक डेमो है

— काइलमिट

क्यों minibox 2 के लिए col और minibox 3 के लिए col के बीच कोई पंक्ति नहीं है? और अगर वहाँ है तो क्या होगा?

— पशूट करें

@ क्रैश, बूटस्ट्रैप 3 ग्रिड देखें , क्या यह वास्तव में मायने रखता है कि एक पंक्ति में कितने कॉलम हैं? । प्रत्येक मिनी बॉक्स उपलब्ध स्थान का 50% (स्तंभ द्वारा विवश) लेता है, इसलिए दो पहली पंक्ति में लगेंगे। कोई भी अतिरिक्त बस एक नई लाइन में लपेट जाएगा। आप उनमें से प्रत्येक को पंक्तियों में जोड़ सकते हैं, लेकिन आपको इसकी आवश्यकता नहीं है। बूटस्ट्रैप डिफ़ॉल्ट रूप से लपेटता है ताकि आपको नई पंक्तियों के साथ अपने मार्कअप को अव्यवस्थित न करना पड़े। यदि यह अर्थपूर्ण रूप से सार्थक है, तो मैं कहूंगा कि इसके लिए जाना चाहिए। लेकिन अगर आप सिर्फ 4 वस्तुओं की सूची प्रदर्शित कर रहे हैं, तो उन्हें एक ही पंक्ति में रखें।

— काइलमिट

@ user3921890, यह एक टिप्पणी लाइन में जवाब देने के लिए बहुत बड़ा विषय है। क्या आप यह बताने के लिए एक नया सूत्र पोस्ट कर सकते हैं कि आप क्या करने की कोशिश कर रहे हैं और कम से कम एक प्रयास इसे करने के लिए, और फिर यहाँ से लिंक करें।

— काइलमिट

Answer 2

@KyleMit ने जो कहा, उसे जोड़कर, उपयोग करने पर विचार करें:

• col-md-* बड़े बाहरी स्तंभों के लिए कक्षाएं
• col-xs-* छोटे आंतरिक स्तंभों के लिए कक्षाएं

यह तब उपयोगी होगा जब आप पृष्ठ को विभिन्न स्क्रीन आकारों पर देखेंगे।

एक छोटे पर्दे पर, यदि संभव हो तो छोटे आंतरिक स्तंभों को बनाए रखते हुए बड़े बाहरी स्तंभों को लपेटना होगा