2017-04-14 14 views
6

https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row पर बूटस्ट्रैप दस्तावेज में इस पृष्ठ पर वे इस उदाहरण दे:पंक्तियों के स्तंभों को दो पंक्तियों में विभाजित करने के लिए बूटस्ट्रैप की .w-100 कक्षा का उपयोग क्यों करें, जब आप केवल दो पंक्तियां बना सकते हैं?

<div class="row"> 
    <div class="col">col</div> 
    <div class="col">col</div> 
    <div class="w-100"></div> 
    <div class="col">col</div> 
    <div class="col">col</div> 
</div> 

यह प्रत्येक पंक्ति में दो कॉलम समान आकार के साथ दो पंक्तियों पैदा करता है।

<div class="row"> 
    <div class="col">col</div> 
    <div class="col">col</div> 
</div> 
<div class="row"> 
    <div class="col">col</div> 
    <div class="col">col</div> 
</div> 

वहाँ .w-100 CSS वर्ग का उपयोग कर और बस के बजाय दो पंक्तियों बनाने के बीच कोई अंतर है: हालांकि, अगर आप सिर्फ दो पंक्तियों बनाकर इस लक्ष्य को हासिल कर सकते हैं?

उत्तर

7

इस विशिष्ट मामले में, कोई अंतर नहीं है।

हालांकि, एक भी .row में कॉलम रखने आम तौर पर इन कारणों के लिए बेहतर है ...

स्तंभ आदेश देने

आप मान लीजिए बजाय पहली और आखिरी कॉलम के क्रम स्विच करना चाहते हैं md और ऊपर। अलग .row कंटेनर के साथ यह संभव नहीं होगा। एक .row में सभी col को रखने से यह संभव हो जाता है।

<div class="row"> 
    <div class="col flex-md-last">col 1</div> 
    <div class="col">col 2</div> 
    <div class="w-100"></div> 
    <div class="col">col 3</div> 
    <div class="col flex-md-first">col 4</div> 
</div> 

उत्तरदायी लेआउट

एक अन्य उदाहरण है। मान लीजिए आप के बजाय एक लेआउट चाहता था: md चौड़ाई (4x1) xs चौड़ाई (2x2)

पर 2 पंक्तियों में

  • 2 कॉलम फिर, यह होगा पर 1 पंक्ति में

    • 4 कॉलम अलग .row divs के साथ संभव नहीं है। लेकिन, चूंकि w-100 को उत्तरदायी रूप से उपयोग किया जा सकता है, इसलिए सभी कोलों को एक पंक्ति में रखकर यह संभव है।

      <div class="row"> 
          <div class="col col-md-3">col 1</div> 
          <div class="col col-md-3">col 2</div> 
          <div class="w-100 hidden-md-up"></div> 
          <div class="col col-md-3">col 3</div> 
          <div class="col col-md-3">col 4</div> 
      </div> 
      

      Demo of the layouts

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

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