एक तत्व

Question

एक पर बूटस्ट्रैप col और पंक्ति कक्षाओं का मेल:

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
     . 
     . 
     </div> 
    </div> 
</div> 

दो:

<div class="row"> 
    <div class="col-md-12 row"> 
    . 
    . 
    </div> 
</div> 

है दोनों कार्यान्वयन ही कर रहे हैं मैं 2 विधि का उपयोग कर सकते हैं ताकि मैं? मार्क-अप को कम कर सकते हैं।

Answer 1

Bootstrap's own API documentation के अनुसार, nesting columns किसी भी कॉलम .col को .row के भीतर घोंसला जाना चाहिए। दोनों को एक तत्व पर जोड़ा नहीं जाना चाहिए।

तथ्य के अलावा यह अर्थपूर्ण रूप से अधिक समझ में आता है- अंतर्निहित सीएसएस गुण दोनों वर्ग प्रभावित इस संरचना पर निर्भर हैं।

यह भी ध्यान दें, col-md-12 अलगाव में उपयोग करते समय, आप प्रभावी रूप से एक पूर्ण चौड़ाई तत्व (जो एक पंक्ति है वैसे भी) बना रहे हैं। ग्रिड लेआउट का उपयोग करने वाले मामले में प्रासंगिक नहीं हो सकता है जब तक कि आपके पास अलग-अलग स्क्रीन आकारों में अन्य तत्व दिखने/आने में न हों।

अधिकार (यदि अन्य स्तंभों के साथ-साथ col-md-12 उपयोग करते हुए):

<div class="row"> 
    <div class="col-md-12"> 
     <div class="row"> 
     . 
     . 
     </div> 
    </div> 
</div> 

गलत:

<div class="row"> 
    <div class="col-md-12 row"> 
    . 
    . 
    </div> 
</div> 

तुम सिर्फ एक पूरी चौड़ाई तत्व चाहते हैं, आप न उपयोग करने की आवश्यकता ग्रिड लेआउट और/या घोंसले के एक स्तर को हटा सकते हैं।

Answer 2

1. यदि आप लगातार एक से अधिक .col- जरूरत है तो आप निम्नलिखित के रूप में लिख सकते हैं ..

<div class="row"> 
    <div class="col-md-6"> 
     . 
     . 
     . 
    </div> 
    <div class="col-md-6"> 
     . 
     . 
     . 
    </div> 
</div> 

2. if you need to divide `.col-` in more `.col` then 

<div class="row"> 
    <div class="col-md-6"> 
     <div class="row"> 
      <div class="col-md-6"> 
       . 
       . 
       . 
      </div> 
      <div class="col-md-6"> 
       . 
       . 
       . 
      </div> 
     </div> 
    </div> 
    <div class="col-md-6"> 
    . 
    . 
    </div> 
</div>