बूटस्ट्रैप में .row का उद्देश्य क्या है?

Question

Bootstrap's documentation के अनुसार

पंक्तियाँ एक .container (निश्चित-चौड़ाई) के भीतर रखा जाना चाहिए या .container-fluid (पूर्ण-चौड़ाई)

और

उपयोग पंक्तियों क्षैतिज बनाने के लिए कॉलम के समूह।

यह आवश्यक क्यों है?

एक .row केवल या तो .container या .container-fluid

की अधिकतम चौड़ाई को देखते हुए आप .row यह अब लगता है लिखने के लिए बंद करने के लिए है कि कब्जा कर सकते हैं:

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column A</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column B</h1> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-md-6"> 
      <h1>Column C</h1> 
     </div> 
     <div class="col-md-6"> 
      <h1>Column D</h1> 
     </div> 
    </div> 
</div> 

इस से:

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column A</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column B</h1> 
    </div> 
</div> 

<div class="container"> 
    <div class="col-md-6"> 
     <h1>Column C</h1> 
    </div> 
    <div class="col-md-6"> 
     <h1>Column D</h1> 
    </div> 
</div> 

Answer 1

कंटेनर

कंटेनर उत्तरदायी चौड़ाई पर चौड़ाई बाधा प्रदान करता है। जब उत्तरदायी आकार बदलते हैं, तो यह कंटेनर बदलता है। पंक्तियां और कॉलम सभी प्रतिशत आधारित हैं इसलिए उन्हें बदलने की आवश्यकता नहीं है। ध्यान दें कि पंक्तियों द्वारा रद्द किए गए प्रत्येक पक्ष पर 15px मार्जिन है।

---

पंक्तियाँ

पंक्तियाँ हमेशा एक कंटेनर में होना चाहिए।

पंक्ति आदर्श होने कॉलम कि 12 को जोड़ने यह भी एक आवरण के रूप में कार्य के बाद से सभी स्तंभों को छोड़ दिया नाव, अतिरिक्त पंक्तियों ओवरलैप नहीं है जब तैरता अजीब मिलता है, जीने के लिए एक जगह कॉलम प्रदान करता है।

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

---

कॉलम

कॉलम अब 15px गद्दी की है। इस पैडिंग का अर्थ है कि कॉलम वास्तव में पंक्ति के किनारे को छूते हैं, जो स्वयं कंटेनर के किनारे को छूता है क्योंकि पंक्ति में नकारात्मक मार्जिन होता है, और कंटेनर में सकारात्मक पैडिंग होती है। लेकिन, कॉलम पर पैडिंग कॉलम के अंदर कुछ भी धक्का देता है जहां इसे होना चाहिए, और कॉलम के बीच 30 पीएक्स गटर भी प्रदान करता है। पंक्ति के बाहर कभी भी कॉलम का उपयोग न करें, यह काम नहीं करेगा।

---

अधिक जानकारी के लिए, मैं आपको this article पढ़ने का सुझाव देता हूं। यह वास्तव में स्पष्ट है, और अच्छी तरह से समझाओ कि बूटस्ट्रैप की ग्रिड प्रणाली कैसे काम करती है।

Answer 2

.्रो तत्वों के दोनों तरफ नकारात्मक मार्जिन है। सभी कॉलम में पैडिंग की दूरी होती है, यहां तक ​​कि पहला और आखिरी वाला (जो कुछ हम नहीं चाहते हैं) तो .row उन्हें ठीक करने के लिए वापस खींचता है। साथ ही, मुझे लगता है कि कॉलम के बजाए कंटेनर में और पंक्तियां अधिक समझदारी होती हैं।